vue项目中自动导入svg并愉快的使用方式

Vue项目中自动导入SVG并愉快的使用方式的攻略需要涉及到以下几个步骤：

1. 安装相关依赖

1. svg-sprite-loader：用于对SVG进行打包处理，将SVG图标精灵化。
2. svgo-loader：对SVG进行压缩和优化，减少SVG的文件大小。

npm install svg-sprite-loader svgo-loader -D

2. 配置webpack配置文件

我们需要对webpack配置文件进行相关设置，使得能够将SVG文件自动化导入，并将其打包为精灵图。

module.exports = {
  // 省略其他配置...
  module: {
    rules: [
     // 对SVG进行处理的加载器配置
      {
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        options: {
          // 将SVG图标转为Symbol形式
          symbolId: 'icon-[name]',
        },
      },
      // 对SVG进行压缩和优化的加载器配置
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svgo-loader',
            options: {
              plugins: [
                { removeTitle: true },
                { convertColors: { shorthex: false } },
                { convertPathData: false },
              ],
            },
          },
        ],
      },
    ],
  },
}

3. 在Vue组件中使用SVG图标

我们需要引入相关的SVG图标，并通过svg标签引用SVG图标。

示例1：

<template>
  <div>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-add"></use>
    </svg>
  </div>
</template>

<script>
import '@/assets/icons/add.svg'

export default {
  name: 'SvgIconsExample',
}
</script>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
}
</style>

示例2：

<template>
  <div>
    <svg-icon name="add" />
  </div>
</template>

<script>
export default {
  name: 'SvgIconsExample',
}
</script>

<style scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
}
</style>

其中，add.svg是SVG图标的文件名。第一个示例使用了原生的svg标签来呈现SVG图标，第二个示例使用了一个名为svg-icon的组件（可以自行封装一个），方便快速引用SVG图标。

至此，我们的Vue项目中已经可以愉快地使用SVG图标了。