vue使用SVG矢量图

SVG（Scalable Vector Graphics，可缩放矢量图形）是一种使用 XML 标记语言描述二维图形和图形应用的开放标准，其核心特性是可缩放性，即使放大缩小都不会失去清晰度和质量。

与其他图像格式（如 PNG、JPEG 等）不同，SVG 是通过描述图形、线条、颜色等元素来构建完整的矢量图形，而不是像其他格式那样基于像素图（位图）的。

使用 SVG 图像有许多优点，例如：

• 可缩放性：SVG 可以在不失真或模糊的情况下进行任意大小的缩放。

• 轻量级：SVG 文件通常比基于位图的图像格式更小，这意味着它们可以更快地加载和渲染。

• 可编辑性：SVG 可以轻松地编辑，并且可以使用 CSS 直接修改其样式。

• 分层结构：SVG 图像的元素可以分成图层，方便重新布局和修改。

• 兼容性：SVG 是一项开放标准，几乎所有现代浏览器都支持它。

• 安装svg-sprite-loader插件

  npm install svg-sprite-loader or yarn add svg-sprite-loader

• 在vue.config.js添加svg的相关配置 (改完配置后需要重启项目)

  module.exports = {
      /* svg 相关配置 */
      chainWebpack: config => {
          const svgRule = config.module.rule('svg');
          // 清空默认svg规则
          // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
          svgRule.uses.clear();
          //针对svg文件添加svg-sprite-loader规则
          //.use('svg-sprite-loader').loader('svg-sprite-loader')，指定了要使用的 loader 插件。在这里，我们使用了 svg-sprite-loader 插件将 SVG 文件变成一个包含所有 SVG 图标的 SVG Sprite。
          svgRule
              .test( /\.svg$/) // 指定要匹配的 SVG 文件的文件名格式，这里是所有以 .svg 结尾的文件。
              .use('svg-sprite-loader')
              .loader('svg-sprite-loader')
              .options({ // 指定了 SVG Sprite 中每个 symbol 元素的 id 格式。'icon-[name]' 表示将以 'icon-' 开头的符号 ID（Symbol ID）作为每个 SVG 图标的标识符
                  symbolId: 'icon-[name]'
              });
      }
  }

•  封装SvgIcon组件

• 在src下面创建icons文件夹      src/icons
•  
•  Icons/index.js文件代码

  import Vue from 'vue'
  import SvgIcon from '../components/SvgIcon.vue' // 替换成自己的文件路径
  // register globally
  Vue.component('svg-icon', SvgIcon)
  
  const req = require.context('./svg', false, /\.svg$/)
  const requireAll = requireContext => {
    return requireContext.keys().map(requireContext)
  }
  requireAll(req)

•  在main.js文件内引入icons文件夹

  import './icons'

•  在文件中使用即可生效

• 效果图
•   如果想给icon添加点击事件最简单的方式就是用span标签包裹然后给span标签添加点击事件