svg-icon使用教程

就是类似于这种小图标的使用

步骤来了~

① 安装依赖

 npm i svg-sprite-loader@4.1.3

② 配置

项目地下创建vue.config.js

const path = require('path')

function resolve(dir) {
   
    return path.join(__dirname, dir)
}



module.exports = {
   
    //  省略其他配置
    chainWebpack(config) {
   
        // set svg-sprite-loader
        config.module
            .rule('svg')
            .exclude.add(resolve('src/icons'))
            .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()
    }
}

③ 创建文件

一 、src/components/svgIcon/index.vue

<template>
  <div v-if="isExternal" :style="styleExternalIcon"