SVG Sprite在Vite应用

本文默认你们了解过 SVG，如果不懂会去 iconfont 下也行。

大家在使用Vue-Cli的时候，想要使用SVG，svg-sprite-loader 绝对是个火热的插件，它用相对优雅的方式帮我们解决了引入 SVG 文件的问题。

到了 Vite 上，由于不再使用 webpack进行打包，svg-sprite-loader不再可用，svg的插件又回到了百花齐放的阶段，其中最火的 vite-sprite-loader，但是他不支持 Sprite 技术（这里要提一下，关于 Sprite 可以看 未来必热：SVG Sprite技术介绍，对于开发UI库或公用上不太友好。

现有我开发UI库的要全面去 webpack，所以在 SVG 碰到了一些问题，遂写了相应的 Rollup 插件（Vite就是基于Rollup打包），地址如下：

rollup-plugin-svg-sprites

并不是造轮子，是看过其他相关的项目，都没有特别符合需求的。

先来个简单示例

1. 先安装插件

// npm
npm i rollup-plugin-svg-sprites -D

// yarn
yarn add rollup-plugin-svg-sprites -D

注：如果单独使用rollup来编译，则需要单独引入@rollup/plugin-commonjs，因为插件的核心是基于 svg-baker 和 svg-baker-runtime, 跟 svg-sprite-loader 一样的，这两个没有es的实现。

2. 在 vite.config.js中：

import svgSprites from 'rollup-plugin-svg-sprites'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    svgSprites({
      exclude: ['node_modules/**']
    })
  ]
})

3. 在Vue单页面中：

<script setup>
import MyIcon from './my-icon.svg?vueComponent'
</script>

<template>
  <MyIcon />
</template>

以上单组件的使用方式，这点跟 vite-sprite-loader的使用方式一致。

支持JSX

相信也有人尝试 react + vite 的组合，插件同样支持以 JSX 的形式返回。

1. 在 vite.config.js中：

import svgSprites from 'rollup-plugin-svg-sprites'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    svgSprites({
      include: ['./icons']
    })
  ]
})

2. 在 App.jsx 中：

import MyIcon from './my-icon.svg?jsx'

function App() {
  return (
    <div className="App">
      <MyIcon />
    </div>
  );
}

export default App;

注：

• JSX的转换采用的是新的方式，需要对于 react 的版本是有一定要求的：
  • >=17.0.0
  • >=16.14.0
  • >=15.7.0
• 如果你在 Vue 中使用的 JSX，则应该采用 vueComponent 属性替代。

多组件通用的使用方式

以我在写的UI库为例子（安装省略）：

1. 先写一个 rollup.config.js:

import svgSprites from 'rollup-plugin-svg-sprites'
import requireContext from '@godxiaoji/rollup-plugin-require-context'

function kebabCase2PascalCase(name) {
  name = name.replace(/-(\w)/g, (all, letter) => {
    return letter.toUpperCase()
  })
  return name.substr(0, 1).toUpperCase() + name.substr(1)
}

export default {
  input: './src/load-svg.js',
  output: {
    format: 'esm',
    file: `lib/load-svg.js`,
    banner: '/* eslint-disable */'
  },
  plugins: [
    requireContext(),
    svgSprites({
      symbolId(filePath) {
        const paths = filePath
          .replace(/\\/g, '/')
          .split('assets/icons/')[1]
          .split('/')

        const fileName = paths.pop().replace('.svg', '')
        return (
          'icon-' + kebabCase2PascalCase([fileName].concat(paths).join('-'))
        )
      }
    })
  ],
}

注意：由于这里用到了 require.context，这是 webpack 带的，rollup 需要借助插件。

2. 写个引用所有icons的源码 ./src/load-svg.js:

const req = require.context('./assets/icons', true, /\.svg$/)

3. 先编译好，输出 lib/load-svg.js:

rollup -c

4. 在Vue单页面中使用：

<script setup>
import './lib/load-svg'
</script>

<template>
  <svg>
    <use xlink:href="#icon-My"></use>
  </svg>
</template>

之所以先编译好，是因为在 Vite 不太推荐使用 require.context。

svg-sprites-cli 批量处理

如果你觉得上面的有点复杂，我把这些步骤封装成一个cli，可以使用 svg-sprites-cli 来进行批量处理。

优雅封装

我们将svg封装成一个独立组件 SvgIcon.vue：

<script setup>
import { defineProps } from 'vue'
import './src/load-svg'

defineProps({
  iconName: String
})
</script>

<template>
  <svg>
    <use :xlink:href="iconName"></use>
  </svg>
</template>

在其他组件中，就可以愉快的使用整批 icons：

<script setup>
import SvgIcon from './SvgIcon.vue'
</script>

<template>
  <SvgIcon iconName="My" />
</template>

结语

欢迎大家使用该插件，如果使用中遇到什么问题欢迎提交issues，静候佳音。