Illustratorで作ったアイコンを、動的に色を変えられる方法

はじめに

Illustratorでアイコンを作ったのはいいが、ある特定のイベントの時は、色を変えたい時がある(例えば、hoverした時とか、JSでclassを動的に変えた時とか)
作ったアイコンはsvgで書き出して、imgタグで表示させる事は出来るが、それだとimgタグが一つの画像として読み込んでしまうので、動的に色を変えることは出来ない。

結局は0と1の羅列を、見た目上で可視化させているだけ

とずっと思ってました。
イラレだけじゃなくて広い意味で言えば、コンピューターで出来ている全てのものは、0と1の組み合わせを画面上で見えるようにしているだけだから、当然かもしれませんが、試しにエディターでaisvgを開いてみたら、やはり開けた!
だって、ブラウザでSVGを開いたらコードが出るのに、エディターで開けないわけがない!っとずっと思っていましたw
で、ふと思ったのが、ならイラレでアイコン作って、SVGをfillで色を変えられる方法もあるはずと思って、色々と試行錯誤してみた。

まずは、アイコンを用意する

01.png

うん、Vimのアイコンが出来た!
で、これをWeb上で色を動的に変えられるようにしたい!

環境設定でSVGのコードをコピーできるようにする

02.png

イラレの「環境設定」を開いて、「ファイル管理・クリップボード」から、「コピー時、SVGコードを含める」をONにします。
デフォルトで、ONになっていると思います。
バージョンによってはこの項目がないものもあるので、その場合はファイルをSVGで保存して、エディターで開いてみましょう。

エディターで開いてコピペする

03.png

エディターで開いて、コードをコピペしてSVGで保存すると、このようになっています。
画面の裏側では、こんなコードの羅列をビジュアルで表示させていたんですね。

軽くリファクタリングする

04.png

要らないコードまであるので、軽くリファクタリングして見た目を綺麗にしましょう。

いよいよ色を変えてみる

05.png

さて、いよいよ色を変えていきましょう!
SVGのタグに、fill: red;を追加してみました!

ブラウザで見てみる

06.png

おお、ちゃんと色が変わっていますね!
今回は手っ取り早くインラインでStyleを書きましたが、
本番ではSVGのコードをコンポーネント化させて、classでfillを動的に変えてみるのがいいでしょう!
再利用性がとても高くなりそうです!

余談

07.png

ちなみに、同じファイルをaiで保存してエディターで見ると、こんな画面が出てきます。
見た目は同じなのに、コードは全くの別物になっているのがわかりますね。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.