2.3.15 • Published 1 month ago
@dramaorg/vitae-quasi-ea v2.3.15
@dramaorg/vitae-quasi-ea
This vite plugin generates a single SVG spritemap containing multiple elements from all .svg
files in a directory.
Features
- Easily generate the SVG spritemap as part of your build process
- Supports
<defs>
, so you can use gradients, patterns, and masks - Works with dev server 🔥
If you find this plugin useful, why not
Installation
# using npm
npm install -D @dramaorg/vitae-quasi-ea
# using pnpm
pnpm install -D @dramaorg/vitae-quasi-ea
# using yarn
yarn add --dev @dramaorg/vitae-quasi-ea
Usage
Vite config
import { svgSpritemap } from '@dramaorg/vitae-quasi-ea';
export default defineConfig({
plugins: [
svgSpritemap({
pattern: 'src/icons/*.svg',
}),
],
});
SVG element
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" />;
};
Options
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 true . |
svgo | SVGOConfig or boolean (optional) | Use SVGO for optimization. Default is true . |
2.3.15
1 month ago
2.3.13
1 month ago
2.3.12
1 month ago
2.3.14
1 month ago
2.3.11
1 month ago
2.2.11
1 month ago
2.1.11
1 month ago
2.1.10
1 month ago
2.1.9
1 month ago
2.1.8
1 month ago
2.1.7
2 months ago
1.1.7
2 months ago
1.1.6
2 months ago
1.1.5
2 months ago
1.1.4
2 months ago
1.1.3
2 months ago
1.1.2
2 months ago
1.0.2
2 months ago
1.0.1
2 months ago
1.0.0
2 months ago