是否可以使用 Font Awesome svg 圖示覆寫Vuetify 中的單個圖示，而無需為每個圖示撰寫自定義組件？
像這樣：？？？
import { svgPathData as envelopeSvg } from '@fortawesome/free-solid-svg-icons/faEnvelope'
import { svgPathData as questionCircleSvg } from '@fortawesome/free-solid-svg-icons/faQuestionCircle'
Vue.use(Vuetify)
const app = new Vue({
vuetify: new Vuetify({
icons: {
iconfont: 'md',
values: {
email: envelopeSvg,
question_circle: questionCircleSvg
}
},
...
})
更新 我讓上面的代碼正常作業，但現在我當前的問題是 v-icon 組件使用錯誤的視圖框大小呈現。
<font-awesome-icon class="icon" icon="envelope" /> //viewBox="0 0 512 512"
<v-icon class="icon">email</v-icon> //viewBox="0 0 24 24"
uj5u.com熱心網友回復：
你需要添加正確的方式
https://vuetifyjs.com/en/features/icon-fonts/#font-awesome-5-icons
yarn add @fortawesome/fontawesome-free -D
import '@fortawesome/fontawesome-free/css/all.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'fa',
},
})
更新：根據Git 問題
您需要安裝您需要的所有字體或添加指向 CDN 的鏈接，iconfont 僅指定哪個圖示集將用于默認 Vueitfy 圖示（例如 v-select 中的箭頭等）
<v-icon>mdi-user</v-icon> // MDI will be used
<v-icon>user<v-icon> // Material Icons will be used
<v-icon>fas fa-whatever<v-icon> // FA will be used
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/355626.html
標籤：Vue.js svg vuetify.js 字体真棒