在 Vue 项目中全局使用 SVG 图标

在 Vue 项目中使用 SVG 图标的原理主要是通过以下步骤实现的：

1. 创建 SVG 图标组件 (SvgIcon):

   • 创建一个 Vue 组件 SvgIcon 来显示 SVG 图标。这个组件可以接收一些属性（如 iconName）来确定使用哪个 SVG 图标。

2. 导入并注册 SVG 图标组件:

   • 使用 Vue.component 全局注册 SvgIcon 组件，这样你可以在项目的任何地方使用 <svg-icon> 组件来显示图标。

3. 加载 SVG 文件:

   • 使用 require.context 动态导入所有 SVG 图标文件。这是 Webpack 提供的功能，它允许你一次性导入一个目录中的所有文件。
   • 在你的代码中，require.context('./svg', false, /\.svg$/) 表示从当前路径的 svg 文件夹中，非递归地加载所有以 .svg 结尾的文件。

4. 引入并注册 SVG 图标:

   • requireAll(req) 调用 req 作为参数的 requireContext 函数，并对每个匹配的文件执行 requireContext.keys().map(requireContext)。
   • 这会将所有匹配的 SVG 文件作为模块加载，并导入到你的项目中。这些 SVG 文件会被 Webpack 处理，通常是以 <symbol> 的形式注入到 HTML 的 <svg> 元素中。

5. 使用 SVG 图标:

   • 在使用 SvgIcon 组件时，你可以通过传递属性来指定要显示的图标。例如，使用 <svg-icon icon-name="example" /> 来渲染名为 example 的 SVG 图标。

下面是一个基本示例来展示这些步骤：

1. SvgIcon 组件示例

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script>
export default {
  props: {
    iconName: {
      type: String,
      required: true
    }
  },
  computed: {
    svgClass() {
      return `icon icon-${this.iconName}`;
    },
    iconName() {
      return `#icon-${this.iconName}`;
    }
  }
};
</script>

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

2. 导入并注册 SvgIcon 组件

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon' // 引入SvgIcon组件

// 全局注册组件
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

3. 在组件中使用 SVG 图标

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

原理总结

1. 组件封装: SvgIcon 组件封装了对 SVG 图标的使用，使得图标可以像其他 Vue 组件一样使用，并且通过传递 iconName 来动态渲染不同的图标。

2. 动态导入: 使用 require.context 使得所有 SVG 图标文件可以被一次性导入，这不仅简化了图标的使用，还能确保项目在构建时能正确处理和优化 SVG 图标。

3. 可维护性: 使用这种方式管理 SVG 图标，可以统一管理图标的样式和使用方式，增强了代码的可维护性和可扩展性。