在vue项目中优雅的使用Svg

青旅半醒 2022-01-20 05:39 325阅读 0赞

**github demo**: [github地址][github] 如果对您有用，请顺手给个star...

### 闲聊背景 ###

本文主要以`vue-cli3`搭建的项目为例，来聊一下如何在项目中更优雅的使用`svg`。

众所周知，`vue-cli3`已经推出很长一段时间了，大家可以感受一下`vue-cli3`带来的零配置体验。But，也相应带来了一些弊端，就是如果需要修改默认的`loader`时，会比较麻烦。

好了，上正题，建议看此文章之前先去看一下张鑫旭大神的[未来必热：SVG Sprite技术介绍][SVG Sprite]，那么我们接下来主要使用的就是上文中提到的`svg`的 `use`，先上一张`vue-cli3`搭建的项目的目录，可以看到根目录下只保留了`public/`以及`src/`，可以说非常干净，大家可以自己创建一个。

### 在`src/components/`下创建`SvgIcon`组件 ###

<template>
      <svg :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName"/>
      </svg>
    </template>
    
    <script>
    export default {
      name: 'SvgIcon',
      props: {
        iconClass: {
          type: String,
          required: true,
        },
        className: {
          type: String,
          default: '',
        },
      },
      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>
    复制代码

### 在`src/`下创建一个`icons`目录，目录结构如下： ###

`svg`目录主要用于存放`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$/)
    requireAll(req)
    复制代码

当然，如果你有自己的想法或需求，可以单独引入，无需非要注册到全局。

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

这一步就没什么好说的了，如果需要注册到全局，需要在入口文件中引入。

好了，接下来是最重要的一步：

### 修改默认的`loader`: ###

大家可以去[vue-cli3官网][vue-cli3]去查看具体教程，这里我只说需要修改的`loader`以及具体的代码实现。

首先需要注意的是，通过`vue-cli3`构建的项目可以初始化进行很多选择，我构建的目录更多的是以`*.config.js`的形式存在的。

在根目录下创建一个名为`vue.config.js`文件，接下来的操作都和它有关，先来看一下它完整的代码：

const path = require('path')
    
    function resolve (dir) {
      return path.join(__dirname, './', dir)
    }
    
    module.exports = {
      chainWebpack: config => {
        config.plugin('define').tap(args => {
          const argv = process.argv
          const icourt = argv[argv.indexOf('--icourt-mode') + 1]
    
          args[0]['process.env'].MODE = `"${icourt}"`
    
          return args
        })
        // svg rule loader
        const svgRule = config.module.rule('svg') // 找到svg-loader
        svgRule.uses.clear() // 清除已有的loader, 如果不这样做会添加在此loader之后
        svgRule.exclude.add(/node_modules/) // 正则匹配排除node_modules目录
        svgRule // 添加svg新的loader处理
          .test(/\.svg$/)
          .use('svg-sprite-loader')
          .loader('svg-sprite-loader')
          .options({
            symbolId: 'icon-[name]',
          })
    
        // 修改images loader 添加svg处理
        const imagesRule = config.module.rule('images')
        imagesRule.exclude.add(resolve('src/icons'))
        config.module
          .rule('images')
          .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
      },
      configureWebpack: {
        devServer: {
          open: true,
          // https: true,
          proxy: {
            '/user': {
              target: 'https://devadminschool.icourt.cc',
            },
            '/live': {
              target: 'https://devadminschool.icourt.cc',
            },
          },
        },
      },
    }
    复制代码

大家忽略无关紧要的代码，重点从`svg rule loader`注释开始，其实注释已经比较详细了，就是获取默认的`loader`并进行相关的修改，主要有`svg-loader`、`images-loader`，从`vue-cli3`[基础loader][loader]中可以找到这两个`loader`的默认配置。

// 默认的svg loader...
    webpackConfig.module
      .rule('svg')
        .test(/\.(svg)(\?.*)?$/)
        .use('file-loader')
          .loader('file-loader')
          .options({
            name: genAssetSubPath('img')
          })
          
    // 默认的images loader...
    webpackConfig.module
          .rule('images')
            .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
            .use('url-loader')
              .loader('url-loader')
              .options(genUrlLoaderOptions('img'))
    复制代码

对比我一开始的代码可以看出，我把默认的`svg loader`配置中使用的`file-loader`改为了`svg-sprite-loader`，并排除了`node_modules`，把默认的`images-loader`配置添加了`svg`，并排除了`src/icons`目录。

### 如何使用？ ###

*  可以把设计大大给的svg 或者从[iconfont][]官网下载开源的icon的svg格式，复制到`src/icons/svg`目录下；
 *  点击`svg`查看源码，修改`fill`属性， `fill="currentColor"`，或者`fill=""`，如果无此属性，就不用管，这样做是可以让外部控制icon的颜色，或随父元素的color；
 *  注意svg命名和SvgIcon命名一致，看一下最终使用：这里就会使用`src/icons/svg/go-back.svg`文件。

### 总结： ###

以上讲的比较糙，奈何文字功底是硬伤，最后附上github demo 代码示例： 此项目也可以当做项目初始架构，内置了vue-router、vuex等。

本文以vue-cli3创建的项目为例，之前的项目可以直接去手动修改对应的loader即可。

[github地址][github] 如果对您有用，请顺手给个star...

本文是在掘金上发布的第一篇帖子，新人入驻，还请各位前辈多关怀...

[github]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FLeeStaySmall%2Fvue-svg-demo
[SVG Sprite]: https://link.juejin.im?target=https%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2014%2F07%2Fintroduce-svg-sprite-technology%2F
[vue-cli3]: https://link.juejin.im?target=https%3A%2F%2Fcli.vuejs.org%2Fzh%2Fguide%2Fwebpack.html%23%25E6%25B7%25BB%25E5%258A%25A0%25E4%25B8%2580%25E4%25B8%25AA%25E6%2596%25B0%25E7%259A%2584-loader
[loader]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Fvue-cli%2Fblob%2Fdev%2Fpackages%2F%2540vue%2Fcli-service%2Flib%2Fconfig%2Fbase.js
[iconfont]: https://link.juejin.im?target=http%3A%2F%2Fwww.iconfont.cn