【CSS／SVG】ボックスサイズのSVGアイコン
「ボックス内に収まるSVGのアイコン」を作ってみました。
（cssの練習＋備忘録）
特徴
- SVGの使い回し可
- hoverでアイコンの色が変わる
- アイコン × テキスト可
- ボックスはアスペクト比
- ボックスのクラスは入れ子
- ブラウザ幅に合わせて縮む（レスポンシブ）
コード
See the Pen div x svg 練習 by Rin5Graphic (@Rin5Graphic) on CodePen.
html構成
<div class=”container”>
<div class=”box”>
<svg>
<use class=”icon_color” href=”#man”>
</svg>
</div>
</div>
<svg>
<symbol viewBox=”0 0 384 512″ id=”man”>
<path d=”〜〜〜”>
</symbol>
</svg>
CSS構成
- containerクラス「全体を横並びに」
- boxクラス「SVGアイコン用のボックス（丸型）」
- icon_colorクラス「アイコンの色」
- #man 「SVGを使い回しするためのID」
SVG設定
- symbol viewBox「アイコンサイズ（縦横比率）」
- path d「アイコンの線データ」
課題
- はみ出る
- はみ出るとボックスの比率が変わる