1、参考:https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.17&helptype=code
https://blog.csdn.net/xyr0709/article/details/92835670
法一:使用SVG文件
2、使用svg文件,将下载的iconfont.js中的Path复制出来,生成新的SVG文件
3、SVG文件内容,注意width和Height取viewBox中的数值
4、src\icons\index.js
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
5、src\components\SvgIcon\index.vue
<template>
<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
<use :xlink:href="iconName" />
</svg>
</template>
<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
isExternal() {
return isExternal(this.iconClass)
},
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
},
styleExternalIcon() {
return {
mask: `url(${this.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
display: inline-block;
}
</style>
6、使用
<svg-icon icon-class="vehicle"/>
法二:使用symbol引用
7、src\icons\iconfont
8、src\icons\iconfont\iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 2794727 */
src: url('iconfont.woff2?t=1630983649758') format('woff2'),
url('iconfont.woff?t=1630983649758') format('woff'),
url('iconfont.ttf?t=1630983649758') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 48px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.icon-vehicle:before {
content: "\e699";
}
9、src\main.js,全局引用
// icon
import '@/icons/iconfont/iconfont.js'
import '@/icons/iconfont/iconfont.css'
10、使用
<svg class="iconfont" aria-hidden="true">
<use xlink:href="#icon-vehicle"></use>
</svg>