0.4.14 • Published 12 months ago
svg-sprites v0.4.14
svg-sprites
Compile svgs in a directory to a spritesheet and make it available as text or blob.
Includes a CustomElement that makes it easy to use any icon.
<svg-icon icon="speaker" />
Or SSR the SVG symbols into the page.
import { svg } from 'svg-sprites/sheet';
// nuxt
<template>
<NuxtLayout name="default">
<div style="display: none" v-html="svgIcons"></div>
<NuxtPage />
</NuxtLayout>
</template>
Vite configuration
import svgSprite from "svg-sprites/vite";
export default {
plugins: [
svgSprite({ dir: ["assets/icons/*.svg"] }),
],
};
Next / Webpack configuration
/** @type {import('next').NextConfig} */
module.exports = {
webpack(config, options) {
config.module.rules.push({
use: [
{
loader: "svg-sprites/loader",
options: {
dir: "./assets/icons/*.svg",
},
},
],
});
return config;
},
};
Component Usage
Place your SVG files in a directory of choice, by default /assets/icons/**/*.svg
.
// import component
import "svg-sprites/svg-icon";
// ...
// use in html
<body>
<svg-icon icon="speaker" />
</body>
Features/Issues TODO:
- replace string, for replacing a hex color with currentColor for example.
- make sure globs use the correct cwd
- provide an export with a Map of all the symbols to use in JS
- import svg as jsx component?
- generate types for icon names
0.4.10
1 year ago
0.4.9
1 year ago
0.4.8
1 year ago
0.4.13
1 year ago
0.4.14
12 months ago
0.4.11
1 year ago
0.4.12
1 year ago
0.4.5
1 year ago
0.4.4
1 year ago
0.4.7
1 year ago
0.4.6
1 year ago
0.4.1
1 year ago
0.4.3
1 year ago
0.4.2
1 year ago
0.3.0
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago