Vuetifyのv-iconに自作SVGアイコンを(楽に)使いたい！！

# TL;DR
SVGアイコンをWebfontにしてstyle.cssをインポートすると
`<v-icon>{名前}</v-icon>`で使えるようになるよ！

# Vuetifyのリファレンスがかなりアレ
Vuetifyのv-iconってFontAwesomeとかのアイコンを利用できるじゃないですか。
でも自作のSVGアイコンも使いたいですよね。

一応リファレンスにやり方が載っています。

[Installing Icons — Vuetify.js](https://vuetifyjs.com/ja/framework/icons#custom-components)

簡単に訳すと、

**SVGファイルを単一コンポーネントにしてVue.useの段階でセットすれば$vuetify.icons.{名前}で利用できるよ！**

ということです。
追加したいアイコンが100個ぐらいあった場合、1個1個単一コンポーネントにしてVue.useで読み込ませるのは非常に不便ですしコードが長くなるしで割と最悪です。

そこで色々調べていたところ,このような投稿がありました。

[Vuetify Custom Icons Documentation is Horrendous : vuetifyjs](https://www.reddit.com/r/vuetifyjs/comments/ae8j9r/vuetify_custom_icons_documentation_is_horrendous/)

一番最後の投稿に

```
Well, for anyone from the future who stumbles across this, I found a way to do it without using Vuetify at all.

So that site that I found, fontello.com, gives a css file that references the icons by class name, as I alluded to above. This class name is set on the site when you download the zip. 

So if you just import the css file as I did above, and then you can just reference the icon by name (with the prefix you used) in a v-icon and it should work.

If anyone sees this and is having trouble getting it to work, shoot me a message. 

I'm usually pretty good about answering within a couple days.
```

というコメントがあります。

fontello.comというサイトでcssファイルを使ってimportすれば読み込めるぞ！という内容です。

色々あって今回はfontello.comではなく同じ様なことをしてくれるicomoon.ioで試してみます。

# サイトにアクセス

<img width="1680" alt="スクリーンショット 2019-05-30 9.33.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206574/758a728a-8e3e-80de-9c36-d55c317e8603.png">


[Icon Font & SVG Icon Sets ❍ IcoMoon](https://icomoon.io/)

アクセスしたら右上のIcoMoon Appをクリックしましょう

<img width="1680" alt="スクリーンショット 2019-05-30 9.34.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206574/8b6291cb-2dab-cd96-eb03-54fbae480ca3.png">

でこんな感じになったら自作SVGアイコンをドラッグアンドドロップ

<img width="1678" alt="スクリーンショット 2019-05-30 9.41.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206574/4cb35817-e521-3fc2-65bd-0b208f847f7d.png">

アップロードしたアイコンが表示されたら、Webfontを生成したいアイコンをクリック(複数可能です)

クリックしたら右下のGenerate Fontをクリックして先に進みましょう

<img width="1680" alt="スクリーンショット 2019-05-30 9.42.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206574/c286fb7a-506c-7a63-51eb-ed2165390498.png">

この画面では　アイコンの名前とコードを決められます。
コードは一意に定まる様にし、名前はわかりやすい名前をつけます。ここでの名前は実際に使用する際に使われます

設定が終わったら右下のDownloadボタンをクリックするとicomoon.zipファイルのダウンロードが始まります

# Vueのプロジェクトに追加
解凍したicomoonフォルダをsrc/assetsに配置しましょう。
だいたいこんな感じになると思います。

<img width="409" alt="スクリーンショット 2019-05-30 11.18.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206574/399f82a7-91ff-801f-bde0-8b67ce09fad4.png">

# 早速使ってみましょう

今回はVueのプロジェクトにvuetifyを入れたあと、HelloWorld.vueを編集し動作の確認を行います。

style.cssをインポートして<v-icon>の中に `icon-{名前}` を入れて、実行してみましょう。

<img width="1247" alt="スクリーンショット 2019-05-30 11.21.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206574/39e311b0-a1d4-2807-b171-c81b9f5a4870.png">

僕は先程 svgという名前とemoiという名前をアイコンに付けているので使用する際は上記の様になります。

ここで実行してみましょう

<img width="1203" alt="スクリーンショット 2019-05-30 11.20.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206574/957636c6-78aa-8217-a0e7-11ad9c06dc51.png">


うまくいってますね。　これでアイコンを表示させることが出来ました。

# 追加の設定
インポートしたstyle.cssを見ると、colorの設定があります。

v-icon側でcolorを設定したい場合、style.cssにあるcolorの設定を削除する必要があります。

# 実際の運用

親コンポーネントでimportするのはアレなのでv-iconをラッピングしたoreore-v-iconみたいな単一コンポーネントを作ってそこでインポートするのが運用としては正しいと思います。