TL;DR
SVGアイコンをWebfontにしてstyle.cssをインポートすると
<v-icon>{名前}</v-icon>で使えるようになるよ！
Vuetifyのリファレンスがかなりアレ
Vuetifyのv-iconってFontAwesomeとかのアイコンを利用できるじゃないですか。
でも自作のSVGアイコンも使いたいですよね。
一応リファレンスにやり方が載っています。
簡単に訳すと、
SVGファイルを単一コンポーネントにしてVue.useの段階でセットすれば$vuetify.icons.{名前}で利用できるよ！
ということです。
追加したいアイコンが100個ぐらいあった場合、1個1個単一コンポーネントにしてVue.useで読み込ませるのは非常に不便ですしコードが長くなるしで割と最悪です。
そこで色々調べていたところ,このような投稿がありました。
Vuetify Custom Icons Documentation is Horrendous : vuetifyjs
一番最後の投稿に
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で試してみます。
サイトにアクセス
Icon Font & SVG Icon Sets ❍ IcoMoon
アクセスしたら右上のIcoMoon Appをクリックしましょう
でこんな感じになったら自作SVGアイコンをドラッグアンドドロップ
アップロードしたアイコンが表示されたら、Webfontを生成したいアイコンをクリック(複数可能です)
クリックしたら右下のGenerate Fontをクリックして先に進みましょう
この画面では アイコンの名前とコードを決められます。
コードは一意に定まる様にし、名前はわかりやすい名前をつけます。ここでの名前は実際に使用する際に使われます
設定が終わったら右下のDownloadボタンをクリックするとicomoon.zipファイルのダウンロードが始まります
Vueのプロジェクトに追加
解凍したicomoonフォルダをsrc/assetsに配置しましょう。
だいたいこんな感じになると思います。
早速使ってみましょう
今回はVueのプロジェクトにvuetifyを入れたあと、HelloWorld.vueを編集し動作の確認を行います。
style.cssをインポートしての中に icon-{名前} を入れて、実行してみましょう。
僕は先程 svgという名前とemoiという名前をアイコンに付けているので使用する際は上記の様になります。
ここで実行してみましょう
うまくいってますね。 これでアイコンを表示させることが出来ました。
追加の設定
インポートしたstyle.cssを見ると、colorの設定があります。
v-icon側でcolorを設定したい場合、style.cssにあるcolorの設定を削除する必要があります。
実際の運用
親コンポーネントでimportするのはアレなのでv-iconをラッピングしたoreore-v-iconみたいな単一コンポーネントを作ってそこでインポートするのが運用としては正しいと思います。