Vue-自定义icon实现

合集 - 前端(1)

1.Vue-自定义icon实现2023-06-02

收起

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

1. 在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>
 

2. 在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)
}

3. 安装webpack
   
4. 安装svg-sprite-loader
   
5. 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()
  }
}
 

6. 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')
 

7. 使用

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