Vite 内联 SVG，打造极致性能的单一 JavaScript 文件

在 Vite 构建中内联 SVG，实现单一 JavaScript 文件

问题

在 Vite 和 Vue 的构建过程中，默认情况下会生成一个 assets 文件夹，其中包含 SVG 和 GIF 文件。对于希望获得包含所有资源的单一 JavaScript 文件的用户来说，这可能不理想。

解决方法

使用 vite-plugin-svg-icons 插件，我们可以轻松地在 Vite 构建中内联 SVG 图标。

插件安装和配置

安装插件：

npm install --save-dev vite-plugin-svg-icons

创建插件配置：

// vite.config.js
import { defineConfig } from 'vite'
import svgIcons from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    svgIcons({
      iconDirs: [
        {
          path: 'src/assets/icons',
          prefix: 'icon-'
        }
      ]
    })
  ]
})

• iconDirs 数组指定了包含 SVG 图标的目录。
• prefix 选项定义了内联 SVG 图标的 class 前缀。

使用 SVG 图标

在 Vue 组件中，我们可以使用以下语法内联 SVG 图标：

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

注意： 需要在组件中导入 SvgIcon 组件：

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'MyComponent',
  components: {
    SvgIcon: require('@/components/SvgIcon.vue').default
  }
})
</script>

代码示例

假设我们在 src/assets/icons 目录下有一个名为 home.svg 的 SVG 文件。按照上述步骤配置后，我们可以如下使用它：

<template>
  <svg-icon icon="home" />
</template>

这将生成以下 HTML 输出：

<svg class="icon-home" aria-hidden="true">
  <use xlink:href="#icon-home"></use>
</svg>

结论

通过使用 vite-plugin-svg-icons 插件，我们可以轻松地在 Vite 构建中内联 SVG 图标，从而生成一个包含所有资源的单一 JavaScript 文件。这简化了部署并消除了对资产文件夹的需求。

常见问题解答

1. 是否可以内联 GIF 文件？

此插件无法内联 GIF 文件。

2. SVG 图标内联会影响 SEO 吗？

SVG 图标内联不会对 SEO 产生负面影响。

3. 是否可以自定义 SVG 图标的大小和颜色？

是的，可以通过 CSS 轻松地自定义 SVG 图标的大小和颜色。

4. 内联 SVG 图标会减慢加载时间吗？

由于 SVG 图标是直接内联到 HTML 中的，因此与从外部文件加载相比，它可能会略微加快加载时间。

5. 我在哪里可以找到更多关于此插件的信息？

有关 vite-plugin-svg-icons 插件的更多信息，请访问：https://github.com/antfu/vite-plugin-svg-icons