Vue-custom icon implementation

After introducing element-ui into the project, it is found that its built-in icons are limited and cannot meet the needs of the project, so it is necessary to customize the icon to meet the needs.

1. Create a new SvgIcon directory under the components of the vue project, and create a new index.vue under the SvgIcon directory to
   
   insert the code:

<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. Create an icons folder under src, put a folder directory of svg files, and create a new index.js, globally define the component
   
   index.js global component

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. Install webpack
   
4. Install svg-sprite-loader
   
5. view.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 modification

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. use

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