
Security News
Vite Releases Technical Preview of Rolldown-Vite, a Rust-Based Bundler
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
vite-plugin-svg-spritemap
Advanced tools
This vite plugin generates a single SVG spritemap containing multiple elements from all .svg
files in a directory.
<defs>
, so you can use gradients, patterns, and masksIf you find this plugin useful, why not
# using npm
npm install -D vite-plugin-svg-spritemap
# using pnpm
pnpm install -D vite-plugin-svg-spritemap
# using yarn
yarn add --dev vite-plugin-svg-spritemap
Vite config
import { svgSpritemap } from 'vite-plugin-svg-spritemap';
export default defineConfig({
plugins: [
svgSpritemap({
pattern: 'src/icons/*.svg',
}),
],
});
SVG element
<svg>
<use xlink:href="/spritemap.svg#example"></use>
</svg>
React component example
export const Icon: React.FC<{ name: string }> = ({ name }) => (
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<use xlinkHref={`/spritemap.svg#${name}`} />
</svg>
);
const App = () => {
return <Icon name="arrow" />;
};
Option | Type | Description |
---|---|---|
pattern | string | A glob pattern that specifies which SVG files to include in the sprite. |
prefix | string (optional) | A string that is added to the beginning of each SVG icon's ID when it is added to the sprite. |
filename | string (optional) | The name of the output file that contains the SVG sprite. Default is spritemap.svg . |
currentColor | boolean (optional) | Replace colors in the SVGs with the currentColor value by SVGO. Default is false . |
svgo | SVGOConfig or boolean (optional) | Use SVGO for optimization. Default is true . |
emit | boolean (optional) | Additionally emit the file so that other vite plugins can process it (eg. compression). Default is false . |
FAQs
Generates a SVG spritemap from multiple .svg files
The npm package vite-plugin-svg-spritemap receives a total of 830 weekly downloads. As such, vite-plugin-svg-spritemap popularity was classified as not popular.
We found that vite-plugin-svg-spritemap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Vite releases Rolldown-Vite, a Rust-based bundler preview offering faster builds and lower memory usage as a drop-in replacement for Vite.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.