时间：2022-02-18 09:15:44 | 栏目：vue | 点击：次
在项目开发中，使用图标的方式有很多种，可以在iconfont上面找到合适的图标，通过http或者直接下载使用，这里我分享一种通过实现自定义组件的方式引入图标。
这里通过@vue/cli 4.5.13新建项目，并且需要安装依赖svg-sprite-loader，用来处理对应的svg图标，方便我们使用。
安装： npm install --save-dev svg-sprite-loader
在安装svg-sprite-loader后，新建vue.config.js来配置依赖：
// vue.config.js
const { resolve } = require('path')
module.exports = {
chainWebpack(config) {
config
.module
.rule('svg')
.exclude
.add(resolve('src/icons'))
.end()
config
.module
.rule('icons')
.test(/\.svg$/)
.include
.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
}
}
这里通过chainWebpack来做了两项配置：
在components目录下新建一个SvgIcon.vue文件：
<template>
<i class="icon">
<!-- aria-hidden, 帮助残障人士阅读(设备读取内容时会跳过这个标签以免混淆) -->
<svg aria-hidden="true" :width="size" :height="size" :fill="fillColor">
<use :xlink:href="iconName" rel="external nofollow" ></use>
</svg>
</i>
</template>
<script lang="ts">
import { PropType, toRefs } from 'vue'
export default {
props: {
size: {
type: Number as PropType<number>,
default: 14
},
fillColor: {
type: String as PropType<string>,
default: '#000'
},
iconName: {
type: String as PropType<string>,
required: true
}
},
setup(props: any) {
const { size, fillColor, iconName: _iconName } = toRefs(props)
const iconName = `#${_iconName.value}`
return {
size,
fillColor,
iconName
}
}
}
</script>
然后，新建一个icons目录，并且新建一个index文件，用来挂在组件和引入svg图标：
// index.ts
import SvgIcon from '@/components/SvgIcon.vue'
import { App } from 'vue'
export default (app: App) => {
app.component('svg-icon', SvgIcon)
}
const ctx = require.context('./svg', false, /\.svg$/)
const requestAll = (ctx: __WebpackModuleApi.RequireContext) => ctx.keys().forEach(ctx)
requestAll(ctx)
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import installSvgIcon from '@/icons/index'
const app = createApp(App)
installSvgIcon(app)
app.mount('#app')
这个文件做了两件事：
首先，我们要在icons/svg目录下存放svg图标文件（在iconfont上找自己需要的）；
然后，就可以在其他地方使用啦：
<template> <img alt="Vue logo" src="./assets/logo.png"> <svg-icon icon-name="icon-dashboard"></svg-icon> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> </template>
直接通过组件svg-icon的方式引入，然后传入icon-name即可，icon-name的值由icon拼接svg文件名组成。
这种自定义方式引入svg图标的方式，还是挺方便的，想要加上一个图标的时候，几步即可：
但是，修改样式时不能通过css来修改，这点就不太方便了。