(资料图片)
在项目中引入了element-ui之后，发现其内置的icon有限，无法满足项目的需求，因此需自定义icon来实现需求。
- 在vue项目的components下新建SvgIcon目录，在SvgIcon目录下新建index.vue插入代码：
<script setup>import { defineProps, computed } from "vue"const props = defineProps({ icon: { type: String, required: true }})const iconName = computed(() => { return `#icon-${props.icon}`})</script>- 在src下建立一个icons文件夹，放一个svg文件的文件夹目录，以及新建index.js，全局定义组件index.js全局组件
import SvgIcon from "@/components/SvgIcon"const svgRequired = require.context("./svg", false, /\.svg$/)svgRequired.keys().forEach((item) => svgRequired(item))export default (app) => { app.component("svg-icon", SvgIcon)}- 安装webpack
- 安装svg-sprite-loader
- vue.config.js
// const { defineConfig } = require("@vue/cli-service")// module.exports = defineConfig({// transpileDependencies: true// })const webpack = require("webpack");const path = require("path")function resolve(dir) { return path.join(__dirname, dir)}module.exports = { lintOnSave: false, chainWebpack(config) { // 设置 svg-sprite-loader // config 为 webpack 配置对象 // config.module 表示创建一个具名规则，以后用来修改规则 config.module // 规则 .rule("svg") // 忽略 .exclude.add(resolve("src/icons")) // 结束 .end() // config.module 表示创建一个具名规则，以后用来修改规则 config.module // 规则 .rule("icons") // 正则，解析 .svg 格式文件 .test(/\.svg$/) // 解析的文件 .include.add(resolve("src/icons")) // 结束 .end() // 新增了一个解析的loader .use("svg-sprite-loader") // 具体的loader .loader("svg-sprite-loader") // loader 的配置 .options({ symbolId: "icon-[name]" }) // 结束 .end() config .plugin("ignore") .use( new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn$/) ) config.module .rule("icons") .test(/\.svg$/) .include.add(resolve("src/icons")) .end() .use("svg-sprite-loader") .loader("svg-sprite-loader") .options({ symbolId: "icon-[name]" }) .end() }}- main.js修改
import SvgIcon from "@/icons"const app = createApp(App)SvgIcon(app);app.use(store)app.use(router)app.use(ElementPlus)app.mount("#app")// createApp(App)// .use(store).use(router).mount("#app")- 使用
关键词：
