手摸手，优雅实现vue中使用 svg-icon

妖狐艹你老母 2022-08-30 06:21 273阅读 0赞

[svg][]

###  1. 安装依赖 ###

npm install svg-sprite-loader --save-dev
    
    #yarn add svg-sprite-loader

\`svg-sprite-loader\` 是 webpack loader，可将多个 svg 打包成 svg-sprite

安装完后还需要进行改造，原因是：\`vue-cli\` 默认情况下会使用 \`url-loader\` 对svg进行处理，会将它放在 \`/img\` 目录下，这时候引入\`svg-sprite-loader\`会引起冲突

//默认`vue-cli` 对svg做的处理，正则匹配后缀名为.svg的文件，匹配成功之后使用 url-loader 进行处理。
    
     {
    
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    
        loader: 'url-loader',
    
        options: {
    
          limit: 10000,
    
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
    
        }
    
    }

改造：

*  \`svg-sprite-loader\` 只处理指定文件下的svg
 *   \`url-loader\` 只处理指定文件以外的所有svg

**vue-cli2**

在webpack.base.conf.js的 \`rules\` 中加上：

{
    
        test: /\.svg$/,
    
        loader: 'svg-sprite-loader',
    
        include: [resolve('src/icons')],
    
        options: {
    
            symbolId: 'icon-[name]' // name代表图标的名字
    
        }
    
    },
    
    {
    
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    
        loader: 'url-loader',
    
        exclude: [resolve('src/icons')], // 使用exclude排除src/icons，让url-loader只处理除此文件夹之外的svg
    
        options: {
    
            limit: 10000,
    
            name: utils.assetsPath('img/[name].[hash:7].[ext]')
    
        }
    
    }

**vue-cli3 **在 \`vue.config.js\` 中添加如下webpack的配置

const path = require("path");
    
    function resolve(dir) {
    
        return path.join(__dirname, dir);
    
    }
    
    module.exports = {
    
        chainWebpack(config) {
    
            config.module
    
                .rule("svg")
    
                .exclude.add(resolve("src/icons")) // 使用exclude排除src/icons，让url-loader只处理除此文件夹之外的svg
    
                .end();
    
            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();
    
        },
    
    };

### 2. 在 \`@/src/components\` 下新建 \`SvgiCon.vue\`组件 ###

<template>
    
        <svg :class="svgClass" aria-hidden="true">
    
            <use :xlink:href="iconName"></use>
    
        </svg>
    
    </template>
    
    
    
    <script>
    
    export default {
    
        name: "svg-icon",
    
        props: {
    
            iconClass: {
    
                type: String,
    
                required: true,
    
            },
    
            className: {
    
                type: String,
    
            },
    
        },
    
        computed: {
    
            iconName() {
    
                return `#icon-${this.iconClass}`;
    
            },
    
            svgClass() {
    
                if (this.className) {
    
                    return "svg-icon " + this.className;
    
                } else {
    
                    return "svg-icon";
    
                }
    
            },
    
        },
    
    };
    
    </script>
    
    
    
    <style scoped>
    
    .svg-icon {
    
        width: 1em;
    
        height: 1em;
    
        vertical-align: -0.15em;
    
        fill: currentColor;
    
        overflow: hidden;
    
    }
    
    </style>

### 3. 在src目录下新建icons、svg文件夹和index.js文件,目录结构如下 ###

svg 文件夹存放要使用的 .svg 图片，然后使用 index.js 自动引入 \`@/src/icons/svg\` 下的所有图标

index.js 如下：

import Vue from 'vue'
    
    import SvgIcon from '@/components/SvgIcon'// svg组件
    
    
    
    // 全局注册组件
    
    Vue.component('svg-icon', SvgIcon)
    
    // 定义一个加载目录的函数
    
    const requireAll = requireContext => requireContext.keys().map(requireContext)
    
    const req = require.context('./svg', false, /\.svg$/)
    
    // 加载目录下所有 .svg文件
    
    requireAll(req)

这样每次只要增删改对应的图标，就会自动生成 \`svg symbol\`

###  4. 在 \`main.js\`中引入 ###

import './icons'

### 5. 在页面中使用 ###

[svg]: https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code