Vuetifyでサポートされてないアイコンも簡単に使用する
2022-11-16
azblob://2022/11/18/eyecatch/2022-11-14-vuetify-icons-000.png

今回はVuetifyで自作のアイコンや無料で配布されているアイコンを簡単に使用できる方法をご紹介します。 元々VuetifyではMaterial Design Iconsのアイコンを mdi- のプレフィックスを付けることで簡単に利用することができます。

 

<v-icon>mdi-plus</v-icon>

 

Material Design Iconsのアイコンはとても豊富なので、他のアイコンを使わなくてもいい場合はこのまま利用してもらえれば問題ないかと思います。 ですが、どうしてもMaterial Design Icons以外のアイコンも使いたい!!って場合もあると思います。 そんなときに使える技なので興味のある方は是非見て行ってください^^

 

Fontelloでwebフォントにする

 

まず、Fontelloというサイトにアクセスします。このサイトはベクター画像をwebフォントにしてくれます。

 

Fontello

 

ここに追加したいアイコンをドラッグし、選択します。(選択すると赤枠で表示されます)

 

Fontelloアイコン選択

 

Customize Namesタブで追加したアイコンの名前を設定します。 ここで設定した名前が実際のコード上でも使用できるようになるのでいい感じに設定しておくことをオススメします!

 

Fontelloアイコン名設定

 

ここまで終わったら右上のDownload webfontでダウンロードしてきます。

 

Vuetifyで使用

 

ダウンロードしてきたzipファイルを解凍してsrc/assetsに配置します。

 

フォルダ配置

 

配置したら、アイコンを使用したいページでfontello.cssファイルをインポートします。 全ページで使用したい場合はdefault.vueでインポートしてしまうのもアリですね。

 

そしてfontelloで設定したアイコン名を以下のように入れてあげます。(画像では見やすいように色と大きさを設定してます)

 

<v-icon>{アイコン名}</v-icon>

 

ページ設定

 

ページを確認してみると、ちゃんと自分で追加したアイコンが表示されています。(だだっ広い割にアイコン小さくてすみません...)

 

アイコン表示

 

これで、サポートされてないアイコンも簡単に使用することができます。

 

最後に

 

今回はVuetifyでサポートされてないアイコンも簡単に使用できる方法をご紹介しました。 書き方を統一したい方もこの方法のようにまとめてwebフォントにすることで、いろんなアイコンが混ざらずに分かりやすくなりそうですね。

 

ちなみにicon-ikaはイラレでチャチャっと作ってみたのですがイカに見えたでしょうか....(低クオリティですみません)

  


 

参考にした記事 https://qiita.com/reud/items/d47c4de86f591b59df09