Vueで技術系アイコンを使いたい！【DEVICON】

Vue.jsでDEVICONのアイコンを使いたい

DEVICONは技術系のアイコンをアイコンフォントとして配布しているサイトでプログラミング言語のロゴなどが豊富に用意されています。以前投稿した こちらの記事でも使用しました。

今回はVue CLIを使い作成したサイト内でアイコンを使おうとした際に少しハマったのでアイコンの導入方法をメモとして残しておきます。

npmでインストールできそう

説明を見たところnpmでインストールして使えるみたい

説明のとおりにインストールしてみる

ターミナルから以下のコマンドでインストール。

$ npm install devicon

アイコンを表示させるためテンプレート内に以下のタグを入れてみる。

hello.vue

<i class="devicon-vuejs-plain"></i>

しかし、これだけでは表示されませんでした。

解決策

App.vueで以下のように記述。

App.vue

import "devicon";

App.vueの中に上の一文を追加したところ、うまく表示してくれました。

おわりに

アイコンフォントをnpmで使ったことがなかったためかなりの時間ハマってしまいました。他のCSSファイルと読み込み方が異なったので少しわかりにくいと感じました。
このあとindex.htmlの中にリンクタグを直接記述しCDNから読み込むのも試したところできました。

今回導入するにあたってnpmとvueの理解がまだまだ足りないなと感じました。npmを使うならば使うべきではない言葉なので修正してくださいなテクニックのため情報がなかったとかでしょうか。もっと掘り下げて調べてみる必要がありそうです。npmでDEVICONのアイコンを導入してる記事や情報がなかったので備忘録として残しておきます。同じようにハマっている人の参考になれば幸いです。

最後まで読んでいただきありがとうございました。