Vue svg-symbol 的使用步骤

922 阅读1分钟

使用规则

    1. 下载 svg 文件
    1. 引入文件
    • import svg from '@/assets/icons/xx.svg'
    1. 安装 svg-sprite-loader
    • yarn add svg -sprite-loader -D
    1. 配置 shims-vue.d.ts
       declare module "*.svg" {
           const content: string;
           export default content;
       } 
    
    1. 配置 vue.config.js
    • 使用 require 有可能会导致 eslint 报错,结合自己使用的 node 版本,可以改为 import 语法
        const path = require('path')
      
        module.exports = {
            lintOnSave: false,
            chainWebpack: config => {
                const dir = path.resolve(__dirname, 'src/assets/icons')
                
                config.module
                    .rule('svg-sprite')
                    .test(/\.(svg)(\?.*)?$/)
                    .include.add(dir).end() // 包含 icons 目录
                    .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end()
                config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
                config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录
            }
        }
    
    1. 使用 svg 标签使用 icon
        <svg>
            <use xlink:href="#xx" />
        </ svg>
    

批量导入 svg

  • 引入 icons 目录自动批量导入目录下的全部 svg 文件
    • __WebpackModuleApi eslint 有可能会报错未定义,如果报错,尝试在上方声明: /* global __WebpackModuleApi */
let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
  requireContext.keys().forEach(requireContext);
try {
  importAll(require.context("../assets/icons", true, /\.svg$/));
} catch (error) {
  console.log(error);
}

Icon 组件封装

  • 用来替代繁琐的 svg 标签
    // Icon.vue
    <template>
            <svg class="icon">
                <use :xlink:href="'#' + name" />
            </svg>
    </template>
    <script lang="ts">
        let importAll = (requireContext: __WebpackModuleApi.RequireContext) =>
          requireContext.keys().forEach(requireContext);
        try {
          importAll(require.context("../assets/icons", true, /\.svg$/));
        } catch (error) {
          console.log(error);
        }
        export default {
            name: 'Icon',
            props: ['name']
        }
    </script>
    <style lang="scss" scoped>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
        }
    </style>

IconFont 文档的 symbol 样式

.icon { 
    width: 1em; 
    height: 1em; 
    vertical-align: -0.15em; 
    fill: currentColor; 
    overflow: hidden; 
}