现在每天每个 Web 应用程序都在他们的项目中使用 svg 图标。因为,svg 给出了详细的视图、分辨率、速度......等等,每个人都使用不同的方法在他们的项目中加载 svg 图标。但是,我个人喜欢这种 Convert all svg's into one sprite.svg 方法

请参阅此指南以了解我为何采用这种模式。

初始项目设置

首先在你的系统中安装 vue cli

$ npm install -g @vue/cli
       -OR-
$ yarn global add @vue/cli

进入全屏模式 退出全屏模式

使用 vue cli 创建 vue 项目

$ vue create svg-icon-setup
#choose: Vue 3 Preview (if you own setup your own configuration)
$ cd svg-icon-setup
$ yarn serve

进入全屏模式 退出全屏模式

现在 vue 应用程序已准备就绪。然后去你的浏览器打开这个网址:http://localhost:8080/

[](https://res.cloudinary.com/practicaldev/image/fetch/s--g3_O2zNy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/020juvarzzts1k61sush.png)

设置 svg 精灵图标。

相同的代码目录运行以下命令

$ vue add svg-sprite

进入全屏模式 退出全屏模式

有关此svg-sprint插件的更多信息

一旦 svg-sprite 添加到您的项目中。该插件将创建两个文件:

• svg-icon-setup/src/components/SvgIcon.vue(图标组件)

• svg-icon-setup/vue.config.js(构建配置)

现在,是时候在src/assets目录中添加我们自己的 svg 图标了。

替换项目中的以下代码更改

<!-- src/App.vue -->

<template>
  <SvgIcon
    name="facebook"
  />
  <SvgIcon
    name="twitter"
  />
  <SvgIcon
    name="tumblr"
  />
</template>

<script>
import SvgIcon from '@/components/SvgIcon'

export default {
  name: 'App',
  components: {
    SvgIcon
  }
}
</script>

进入全屏模式 退出全屏模式

/* vue.config.js */

module.exports = {
  pluginOptions: {
    svgSprite: {
      /*
       * The directory containing your SVG files.
       */
      dir: 'src/assets/icons',
      /*
       * The reqex that will be used for the Webpack rule.
       */
      test: /\.(svg)(\?.*)?$/,
      /*
       * @see https://github.com/kisenka/svg-sprite-loader#configuration
       */
      loaderOptions: {
        extract: true,
        spriteFilename: 'img/icons.svg' // or 'img/icons.svg' if filenameHashing == false
      },
      /*
       * @see https://github.com/kisenka/svg-sprite-loader#configuration
       */
      pluginOptions: {
        plainSprite: true
      }
    }
  },
  chainWebpack: config => {
    config.module
      .rule('svg-sprite')
      .use('svgo-loader')
      .loader('svgo-loader')
  }
}

进入全屏模式 退出全屏模式

上面的代码替换后。kill并运行serve once again:

该页面将像屏幕截图一样呈现在下面

[](https://res.cloudinary.com/practicaldev/image/fetch/s--e4YN8pdk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/bj9r5dat8bgawn2vj9kb.png)

就这样。

参考代码 repo

封面图片由 balazsketyi unsplash