从零出发，优雅高效的使用SVG图标

对于一个需要不断迭代更新的项目，应该具有优雅的管理方式来应对。毕竟，事物不美丽，即使强大也难以保存。

优雅就是简单。

1. 安装依赖

安装 svg-sprite-loader：

npm i svg-sprite-loader@4.1.3

2. 配置 vue.config.js

在 vue.config.js 中添加如下配置：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(resourcePath => {
        return resourcePath.includes('node_modules') || resourcePath.includes('icons')
      })
      .end()
    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(resourcePath => {
        return resourcePath.includes('icons')
      })
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  }
}

3. 复制/创建文件

• src/icons ：这是一个存储 SVG 图标的文件夹。将所有 SVG 图标复制到此文件夹中。

• 组件 （v-icon.vue） ：这是一个 Vue 组件，用于在项目中使用 SVG 图标。

<template>
  <svg>
    <use :xlink:href="`#icon-${name}`"></use>
  </svg>
</template>

<script>
export default {
  props: ['name'],
}
</script>

• 样式 (icon.scss) ：这是一个包含样式的 SCSS 文件，用于控制 SVG 图标的外观。

.icon {
  width: 24px;
  height: 24px;
}

4. 使用 SVG 图标

现在，您可以在项目中使用 SVG 图标了。只需在组件中引用 v-icon 组件即可。

<v-icon name="home"></v-icon>

优势：

• 可扩展性： 您可以轻松地添加或删除 SVG 图标，而无需更改任何代码。
• 灵活性： 您可以自定义 SVG 图标的外观，以匹配您的项目的设计。
• 性能： SVG 图标通常比 PNG 或 JPG 图标更小，因此它们可以更快地加载。

总结：

使用 SVG 图标是一种优雅高效的方式来为您的项目添加视觉元素。通过遵循本指南，您将能够轻松地将 SVG 图标集成到您的项目中。