🤔
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の中に<link>を直接記述しCDNから読み込むのも試したところできました。
今回導入するにあたってnpmとvueの理解がまだまだ足りないなと感じました。npmでDEVICONのアイコンを導入してる記事や情報がなかったので備忘録として残しておきます。参考になれば幸いです。
最後まで読んでいただきありがとうございました。
Discussion