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

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

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

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

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

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

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

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

npm i devicon

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

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

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

どうやって使えばいいの？

npmのページを翻訳したりしてみたり、Googleで使い方について検索してみましたが、解決策を書いてあるページは見当たらなくてハマりました。初めてnpmを使って開発したので知識不足な部分もあるのかなとindex.jsやApp.vueファイルの中で試行錯誤した結果、時間はかかりましたが導入に成功しました。

解決策

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

import "devicon";

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

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

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