SVGでアイコンやらイラストやら作成した時に、
- CSSでスタイルを変更できるようにしたい！
- でもファイルをベタで読み込むのはちょっと…
- それに1つのファイルに纏めたい！
という場合にどうぞ！
ちなみに、サイズがバラバラでも全く問題ないです。
参考：IllustratorとIcoMoonでSVGスプライトのラクラク設定！
SVGファイルを作成
まず、IllustratorでSVGファイルを作成します。
纏めたいアイコンの数だけ適当なサイズでアートボードを作成し、それぞれにアイコンを配置。
アートボードとアイコンのサイズが合っていない時は、アイコンを選択した状態で、オブジェクト→アートボード→選択オブジェクトに合わせるでOK。
ファイル→書き出し→書き出し書式をクリックし、下記設定で任意の場所に保存します。
- ファイル形式：svg
- アートボードごとに作成：チェック入れる（すべてを選択）
軽量化
次に作成したSVGファイルを下記サイトで軽量化させます。
作成したSVGをアップし、軽量化させて先程作成したSVGファイルに上書きします。
https://jakearchibald.github.io/svgomg/
今後もSVGを作成した時は必ずこのサイトで変換させた方がいいです。結構軽くなる…！
合体
次にバラバラのSVGファイルを下記サイトで1つのファイルに纏めます。
https://icomoon.io/app/#/select
左上の「Import icons」からSVGファイルを選択し、全て選択してアクティブにします。
（Untitle Setの右端にあるハンバーガーメニューから「Select All」でも可）
左下の「Generate SVG & more」をクリックして作成すると、ボタンが「Download」に変わるのでクリックしてダウンロード。
読み込み
<body>直下に作成された「symbol-defs.svg」の中身をペターっとコピペ。
<symbol>のIDが読み込みのキーとなります。
アイコンを表示したいところに下記書式で記述。
<svg class="任意のクラス"> <use xlink:href="#symbolのID"/> </svg>
CSSで制御
CSSで色やサイズを変えたい場合、下記のように記述すればできます。
.任意のクラス{
width: 500px;
height: 287px;
fill: red;
}
SVGの色指定はfillで行います。
パーツ毎に色変える
パーツごとにCSSで色を変更することもできます。
<body>直下に記述した時に<symbol>内の<path>にそれぞれクラスを付与。
CSSでは下記のように記述することで変更できます。
.任意のクラス{
.pathのクラスその1{
fill: green;
}
.pathのクラスその2{
fill: blue;
}
}
