带Vuetify的FontAwesome SVG图标-如何在v-icon/prepend-icon中使用? [英] FontAwesome SVG icons with Vuetify - how to use within v-icon/prepend-icon?
问题描述
我是Vue的新手,找不到确切的答案如何在v-icon和prepend-icon中使用FA SVG图标. 如果我使用:
I'm new to Vue, can't find the exact answer how to use FA SVG icons in v-icon and prepend-icon. If i use:
<font-awesome-icon :icon="dekstop" color="gray"></font-awesome-icon>
会显示图标,但是如何在v-icon和prepend-icon中使用FA SVG图标? 样本:
Icons are displayed, but how i can use FA SVG icons in v-icon and prepend-icon? Sample:
<v-autocomplete v-model="replUser"
:items="users"
color="accent white--text"
label="User"
prepend-icon="dekstop></i>" // i can use material font icons here, but FA SVG not worked
>
</v-autocomplete>
我的main.js:
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
// import colors from 'vuetify/es5/util/colors'
import './plugins/vuetify'
import App from './App.vue'
import i18n from './i18n'
import {
library
} from '@fortawesome/fontawesome-svg-core'
import {
FontAwesomeIcon
} from '@fortawesome/vue-fontawesome'
import {
fas
} from '@fortawesome/free-solid-svg-icons'
Vue.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
library.add(fas) // Include needed icons.
Vue.use(Vuetify, {
iconfont: 'faSvg',
})
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
我在做什么错了?
推荐答案
如果要在v-icon/prepend-icon
中使用svg图标,则需要通过$vuetify.icons
对象访问它们. v-icon/prepend-icon
中的任何其他文本都将解释为webfont/css类.
If you want to use svg icons in v-icon/prepend-icon
, then you need to access them through $vuetify.icons
object. Any other text in the v-icon/prepend-icon
will be interpreted as webfont/css class.
但是对于使用$vuetify.icons
对象,您应该注册自定义图标.示例:
But for use $vuetify.icons
object you should register custom icons. Example:
import Vue from "vue";
import Vuetify from "vuetify";
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { faVuejs } from "@fortawesome/free-brands-svg-icons";
Vue.component("font-awesome-icon", FontAwesomeIcon); // Register component globally
library.add(faVuejs); // Include needed icons.
Vue.use(Vuetify, {
icons: {
vue: {
component: FontAwesomeIcon,
props: {
icon: ["fab", "vuejs"]
}
}
}
});
现在您可以使用vue品牌图标:
And now you can use vue-brand icon:
<v-icon>$vuetify.icons.vue</v-icon>
<v-text-field prepend-icon="$vuetify.icons.vue"/>
此外,您可以通过font-awesome-icon
无需注册即可使用:
Also, you can use without register via font-awesome-icon
:
<font-awesome-icon :icon="['fab', 'vuejs']" />
<v-text-field>
<font-awesome-icon :icon="['fab', 'vuejs']" slot="prepend"/>
</v-text-field>
开箱即用,vuetify具有预设的图标配置:
Out of the box vuetify has a preset of icons config that can be associated with SVG:
...
import { fas } from "@fortawesome/free-solid-svg-icons";
...
library.add(fas);
...
Vue.use(Vuetify, {
iconfont: "faSvg"
});
但是要使用它,您应该再次调用$ vuetify.icons(vuetify只是将预设包装为组件):
But for use it you should call $vuetify.icons again (vuetify just wrap preset as component):
<v-icon>$vuetify.icons.warning</v-icon>
完整示例代码框
Full example codesandbox
这篇关于带Vuetify的FontAwesome SVG图标-如何在v-icon/prepend-icon中使用?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!