0.4.14 • Published 9 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
9 months ago
0.4.9
9 months ago
0.4.8
9 months ago
0.4.13
9 months ago
0.4.14
9 months ago
0.4.11
9 months ago
0.4.12
9 months ago
0.4.5
10 months ago
0.4.4
10 months ago
0.4.7
10 months ago
0.4.6
10 months ago
0.4.1
10 months ago
0.4.3
10 months ago
0.4.2
10 months ago
0.3.0
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago