Vue项目中如何使用SVG图标？

方法一：直接引入单个 SVG 文件（推荐）

如果每个 SVG 图标都是一个单独的 .svg 文件，可以通过以下方式引入并使用。

1. 安装依赖

为了更好地处理 SVG 文件，可以安装 vue-svg-loader 或 @svgr/webpack（根据需要选择）。

npm install vue-svg-loader --save-dev

2. 配置 Webpack

如果你使用的是 Vue CLI，默认已经集成了 Webpack。需要修改 vue.config.js 文件，配置对 SVG 文件的处理规则。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 修改默认的 SVG 规则，使其不作为图片资源处理
    config.module.rule('svg').exclude.add(/icons\/[^/]+\.svg$/);

    // 添加新的规则，将指定目录下的 SVG 文件作为 Vue 组件加载
    config.module
      .rule('svg-component')
      .test(/icons\/[^/]+\.svg$/) // 匹配 icons 文件夹下的 SVG 文件
      .use('vue-svg-loader')
      .loader('vue-svg-loader')
      .end();
  }
};

3. 使用 SVG 图标

将 SVG 文件存放在 src/icons 目录下，然后可以直接在组件中引入并使用。

<template>
  <div>
    <MyIcon />
  </div>
</template>

<script>
import MyIcon from '@/icons/my-icon.svg';

export default {
  components: {
    MyIcon
  }
};
</script>

方法二：通过 Symbol Sprite 使用 SVG 图标

如果项目中有大量 SVG 图标，推荐使用 SVG Symbol Sprite 的方式，这样可以减少 HTTP 请求次数并优化性能。

1. 创建 SVG Sprite 文件

将所有 SVG 图标合并到一个文件中，并使用 <symbol> 标签定义每个图标。

<!-- src/icons/sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-1" viewBox="0 0 24 24">
    <path d="M12 2L2 22h20L12 2z" />
  </symbol>
  <symbol id="icon-2" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
  </symbol>
</svg>

2. 引入 SVG Sprite 文件

在入口文件（如 main.js）中引入 SVG Sprite 文件。

import '@/icons/sprite.svg';

3. 使用 <svg> 和 <use> 引用图标

通过 <svg> 和 <use> 标签引用对应的图标。

<template>
  <div>
    <svg class="icon">
      <use xlink:href="#icon-1"></use>
    </svg>
    <svg class="icon">
      <use xlink:href="#icon-2"></use>
    </svg>
  </div>
</template>

<style>
.icon {
  width: 24px;
  height: 24px;
}
</style>

方法三：动态加载 SVG 图标

如果需要动态加载 SVG 图标，可以结合 Vue 的动态组件功能。

1. 配置动态加载规则

确保 Webpack 能正确处理动态导入的 SVG 文件。

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(/icons\/dynamic\/[^/]+\.svg$/); // 排除动态加载的 SVG 文件

    config.module
      .rule('dynamic-svg')
      .test(/icons\/dynamic\/[^/]+\.svg$/)
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  }
};

2. 动态加载图标

在组件中动态加载 SVG 图标。

<template>
  <component :is="currentIcon" />
</template>

<script>
export default {
  data() {
    return {
      currentIcon: null
    };
  },
  mounted() {
    import('@/icons/dynamic/my-icon.svg').then(module => {
      this.currentIcon = module.default;
    });
  }
};
</script>

方法四：使用第三方库管理 SVG 图标

可以借助一些成熟的第三方库来简化 SVG 图标的管理，例如 vite-plugin-icons 或 unplugin-icons。

1. 安装依赖

npm install @iconify/vue --save

2. 使用 Iconify

Iconify 是一个支持多种图标的库，可以直接在项目中使用。

<template>
  <div>
    <Icon icon="mdi:home" />
    <Icon icon="carbon:user" />
  </div>
</template>

<script>
import { Icon } from '@iconify/vue';

export default {
  components: {
    Icon
  }
};
</script>

总结

方法	优点	缺点
直接引入单个 SVG 文件	简单易用，适合少量图标。	每个图标都需要单独引入，可能导致冗余代码。
Symbol Sprite	减少 HTTP 请求，性能优化明显，适合大量图标。	需要手动维护 SVG 文件，复杂度较高。
动态加载	按需加载图标，减少初始加载时间。	实现复杂，不适合简单项目。
第三方库	提供丰富的图标集合，无需手动管理图标文件。	可能增加额外依赖，灵活性较低。