Vue.jsで、fontawesomeを簡単に利用することができます。
公式サイト
詳細については、公式サイトを参考にして下さい。
@fortawesome/vue-fontawesome
install
|
1 |
npm i --save @fortawesome/fontawesome-svg-core |
|
1 2 3 4 5 6 7 8 9 10 11 |
up to date, audited 832 packages in 4s 83 packages are looking for funding run `npm fund` for details 8 vulnerabilities (3 moderate, 5 high) To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. |
|
1 |
npm i --save @fortawesome/free-solid-svg-icons |
|
1 2 3 4 5 6 7 8 9 10 11 |
added 1 package, and audited 833 packages in 5s 83 packages are looking for funding run `npm fund` for details 8 vulnerabilities (3 moderate, 5 high) To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. |
|
1 |
npm i --save @fortawesome/vue-fontawesome@latest |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
npm i --save @fortawesome/vue-fontawesomnpm i --save @fortawesome/vue-fontawesome@latest added 3 packages, and audited 832 packages in 6s 83 packages are looking for funding run `npm fund` for details 8 vulnerabilities (3 moderate, 5 high) To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details.e@latest |
利用方法
下記のアイコン一覧から、表示したいアイコンを選びます。
https://fontawesome.com/icons/
サンプルプログラム
app.js
|
1 2 3 4 5 6 7 8 |
import Vue from 'vue'; window.axios = axios; window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; window.Vue = Vue; const app = new Vue({ el: '#app' }); |
demo.vue
|
1 2 3 4 |
<div id="app"> <font-awesome-icon icon="fa-solid fa-cat"></font-awesome-icon> <font-awesome-icon icon="fa-solid fa-dog"></font-awesome-icon> </div> |
実行結果
