Vue-自定义icon实现

最新推荐文章于 2025-06-18 17:09:56 发布

七七r

最新推荐文章于 2025-06-18 17:09:56 发布

阅读量914

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/weixin_45688141/article/details/131000220

文章介绍了在Vue项目中，当Element-UI内置图标无法满足需求时，如何自定义SVG图标。首先，在components下创建SvgIcon目录并编写SvgIcon组件。然后，在src目录下建立icons文件夹存储SVG图标，并用svg-sprite-loader处理SVG文件。通过修改webpack配置，全局注册SvgIcon组件，并在main.js中引入。最后，文章提供了在模板中使用自定义SVG图标的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中引入了element-ui之后，发现其内置的icon有限，无法满足项目的需求，因此需自定义icon来实现需求。

在vue项目的components下新建SvgIcon目录，在SvgIcon目录下新建index.vue

插入代码：

<template>
    <svg class="svg-icon" aria-hidden="true">
        <use :xlink:href="iconName"></use>
    </svg>
</template>

<script setup>
import { defineProps, computed } from 'vue'
const props = defineProps({
    icon: {
        type: String,
        required: true
    }
})

const iconName = computed(() => {
    return `#icon-${props.icon}`
})
</script>

<style lang="scss" scoped>
.svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
</style>

在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')

使用

 <template #prefix><svg-icon icon="user" /></template>