gem-hunter
Language: TypeScript
Another SVG sprites plugin for Vite/Rollup.
Another SVG sprites plugin for Vite/Rollup. Inspired by vite-plugin-svg-sprite.
runtime and file modenpm i -D vite-plugin-svg-combiner
// vite.config.js import { defineConfig } from 'vite' import svgCombiner from 'vite-plugin-svg-combiner' export default defineConfig({ plugins: [ svgCombiner({ include: ['src/assets/icons/**/*.svg'], }), ], })
Type: string | string[] | RegExp | RegExp[]
Files to be processed. See @rollup/pluginutils.
Required
Type: string | string[] | RegExp | RegExp[]
Files to be excluded. See @rollup/pluginutils.
Default: undefined
Type: boolean | string
Whether to emit sprite file.
true, which means file mode, the sprite file will be emitted to the output directory, the default sprite file name is svg-sprite.svg.false, which means runtime mode, the sprite file will be injected to the bundle. And insert to the DOM automatically.Default: false
Type: string | ((filePath: string) => string)
Customize symbol id.
Some variables can be used in the string or function:
[dirname]: The directory name of the SVG file. eg: a/b/c/d.svg -> a-b-c.[name]: The name of the SVG file. eg: a/b/c/d.svg -> d.When symbolId is a function, the function will be called with the SVG file path as the first argument. The SVG file path is relative to the baseDir option.
Default: [name]
Type: string | ((id: string) => string)
The base directory of the SVG files. The SVG file path is relative to the baseDir option.
When baseDir is a function, the function will be called with the absolute path of the SVG file as the first argument.
You can set baseDir to empty string if you want to use the absolute path of the SVG file as the symbol id.
Default: process.cwd()
Type: object | string
The SVGO config. If a string, the config will be loaded from the specified file.
Note: The loaded config will be merged with the default config using deepmerge.
Default:
{ plugins: [ { name: "preset-default", params: { overrides: { removeViewBox: false, // keep viewBox attr }, }, }, "cleanupIds", // clean up ids, we will use symbol id instead "removeDimensions", // remove width/height attributes, set viewBox instead "removeXMLNS", // remove xmlns attribute ], }
// vite.config.js import { defineConfig } from 'vite' import svgCombiner from 'vite-plugin-svg-combiner' export default defineConfig({ plugins: [ svgCombiner({ include: ['src/assets/icons/*.svg'], emitFile: false, }), ], })
// vite.config.js import { defineConfig } from 'vite' import svgCombiner from 'vite-plugin-svg-combiner' export default defineConfig({ plugins: [ svgCombiner({ include: ['src/assets/icons/*.svg'], emitFile: true, // or a string like 'assets/sprite.svg' }), ], })
// vite.config.js import { fileURLToPath } from "url"; import { defineConfig } from 'vite' import svgCombiner from 'vite-plugin-svg-combiner' export default defineConfig({ plugins: [ svgCombiner({ include: ['src/assets/icons/**/*.svg'], symbolId: 'icon-[name]', baseDir: fileURLToPath(new URL('src/assets/icons', import.meta.url)), }), ], })
// vite.config.js import { fileURLToPath } from "url"; import { defineConfig } from 'vite' import svgCombiner from 'vite-plugin-svg-combiner' export default defineConfig({ plugins: [ svgCombiner({ include: ['src/assets/icons/**/*.svg'], symbolId: (filePath) => { // filePath do not contain directory if (!filePath.includes('/')) { return `icon-[name]` } return `icon-[dirname]-[name]` }, baseDir: fileURLToPath(new URL('src/assets/icons', import.meta.url)), }), ], })
// vite.config.js import { fileURLToPath } from "url"; import { defineConfig } from 'vite' import svgCombiner from 'vite-plugin-svg-combiner' export default defineConfig({ plugins: [ svgCombiner({ include: ['src/assets/icons/**/*.svg'], svgoConfig: fileURLToPath(new URL('svgo.config.js', import.meta.url)), }), ], })