在 vite 为构建工具的开发环境中实现 SVG 图标组件化

Posted 2022-06-18 仰望星空的代码

一、前言

        在以 webpack 为构建工具的开发环境中我们可以很方便的实现 SVG 图标的组件化，这里面 require.context 可以被使用是实现的关键。在 vite 为构建工具时，require.context 不再可用，那应该采用什么样的方式实现呢，这就是本文的要阐述的内容。

        开发环境版本：

        vue：v3.2.31

        vite：v2.8.0

        vite-plugin-svg-icons：v2.0.1

二、webpack 为构建工具的开发环境中的实现

        webpack 提供了一些特定的 API，require.context 就是其中之一。这些 API 为模块的导入提供了很大的便利。在 webpack 的世界中万物皆是模块，自然 SVG 图标文件也不例外，因此可以使用 require.context 方法导入。

   0、采用 svg-sprite-loader 插件处理 svg 文件：

// 安装 svg-sprite-loader 插件
npm install svg-sprite-loader --save-dev

// webpack 中 rules 配置插件识别 svg 文件的规则

       test: /\\.svg$/,
       include: path.join(__dirname, \'../src/icons\'),
       use: [
               
                  loader: \'svg-sprite-loader\',
                  options: