Vue-自定义icon实现

Posted 2023-06-02 atwood-pan

在项目中引入了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>

在 vue 中使用自定义 icon 笔记

参考技术A 编辑 iconfont.css 文件，修改 font-family 字体名称，如 xx-iconfont ，避免与默认的字体库发生冲突，
然后在 assets/css 目录下新建 icon.css 文件 ,

上面 el-icon-xx 中的 xx 为你自定义的名称

最后，就可以在项目中使用自定义的字体文件了。

这个可能是字体文件名称跟原来冲突导致的，假如我们没有使用自定义的名称 xx-iconfont , 而是默认的 iconfont ，那么就可能会出现 icon 不能正确显示的问题。