# smart-svg
> SVG fast display library made of Sass with coloring support.
Latest version **1.1.6** (published 2026-09-15) · MIT license · 0 weekly downloads
## Install
```sh
npm install smart-svg
pnpm add smart-svg
yarn add smart-svg
bun add smart-svg
```
## Health
**Score 65/100 (B)** — status: active.
Positive: has types; no vulnerabilities; has provenance; recently updated; high maintenance score.
Warnings: low downloads; no esm support.
## Facts
| | |
|---|---|
| Version | 1.1.6 |
| Published | 2026-09-15 |
| First published | 2022-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 7 |
| Author | misuken |
| Maintainers | misuken-now |
| Keywords | Sass, Css, SVG, React, Vue, Angular, fast, color |
## Links
- npm: https://www.npmjs.com/package/smart-svg
- Repository: https://github.com/misuken-now/smart-svg
- Homepage: https://github.com/misuken-now/smart-svg#readme
- Issues: https://github.com/misuken-now/smart-svg/issues
- npm.io page: https://npm.io/package/smart-svg
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.1.6 (latest) — 2026-09-15
- 1.1.5 — 2025-11-12
- 1.1.4 — 2025-11-12
- 1.1.3 — 2022-12-30
- 1.1.2 — 2022-12-05
- 1.1.1 — 2022-11-03
- 1.1.0 — 2022-11-03
- 1.0.4 — 2022-11-01
- 1.0.3 — 2022-10-18
- 1.0.2 — 2022-10-18
- 1.0.1 — 2022-10-14
- 1.0.0 — 2022-10-13
- 0.1.0 — 2022-10-13
## README
# smart-svg
This is a SVG fast display library made of Sass with coloring support.
View the [demo](https://misuken-now.github.io/smart-svg/storybook/)
# Highlight
- 🏖 **Easy to use**： Just call Mixin
- 🛠 **Flexible**: Supports SVG color (single color) and gradient control and shape decoration
- 🚀 **Performance**: Very fast display
- 😊 **Brevity**: Reduces various costs because it can be completed only with CSS
- ⭐ **Convenient**: Can be used for pseudo-elements (with some restrictions)
| Function | smart-svg | [react-sass-inlinesvg] | [react-inlinesvg] |
| -------------------------------------------------- | --------- |------------------------| ----------------- |
| Specify SVG in Sass | ✅ | ✅ | ❌ |
| Specify SVG in JSX | ❌ | ✅ | ✅ |
| Style control for individual child elements in SVG | ❌ | ✅ | ✅ |
| SVG coloring | ✅ | ✅ | ✅ |
| Circular and rectangular supports | ✅ | ✅ | ❌ |
| SVG display for pseudo-elements | ✅ | ❌ | ❌ |
| Use outside of React | ✅ | ❌ | ❌ |
| IE11 Support | ❌ | ✅ | ✅ |
| performance | A+ | A | C |
Articles on implementation innovations and performance details.
https://dwango.github.io/articles/2022-12_nicolive_svg/
The following will help you in selecting a library.
- **smart-svg** - This is the smartest way if it meets the functional requirements.
- **[react-sass-inlinesvg]** - This is useful when you want to apply different styles to individual child elements within an SVG element and want to specify which SVG to display from the Sass.
- **[react-inlinesvg]** - It is a stable library.
[react-sass-inlinesvg]: https://github.com/misuken-now/react-sass-inlinesvg
[react-inlinesvg]: https://github.com/gilbarbara/react-inlinesvg
# Usage
```
npm install smart-svg
```
or
```
yarn add smart-svg
```
Write the following in the Sass file and apply the class name to the element.
```
@use "smart-svg";
.icon {
@include smart-svg.show("https://cdn.svgporn.com/logos/react.svg", 1em);
}
.button {
display: inline-flex;
justify-content: center;
align-items: center;
gap: .5ex;
&::before {
@include smart-svg.show-with-pseudo("https://cdn.svgporn.com/logos/react.svg", 1em);
}
}
// React sample code.
// import classNames from "path/to.scss";
// // Apply to span elements, not svg elements.
//
```
# API
[keyword arguments]: https://sass-lang.com/documentation/at-rules/mixin#keyword-arguments
[demo code]: ./demo/demo.stories.module.scss
Use the four mixins applied by smart-svg to specify the SVG resource and any options.
| Mixin | Description |
| --------------------------------- | ----------------------------- |
| `show($url, $options...)` | Plain SVG |
| `show-circle($url, $options...)` | SVG enclosed in a circle |
| `show-square($url, $options...)` | SVG enclosed in a rectangle |
| `show-paseudo($url, $options...)` | Plain SVG for pseudo-elements |
Arguments after `$fill-color` can be specified with Sass's [Keyword Arguments] for simplicity.
Please refer to [demo code] for an example.
```
@use "smart-svg";
.icon1 {
@include smart-svg.show(
// URL or Base64(Data URI scheme) or var(--url)
"https://cdn.svgporn.com/logos/react.svg",
// $size // Alias to $width and $height - Default null
// $fill-color, // SVG fill color - Default null
// $fill-image, // SVG fill image(ex. linear-gradation) - Default null
// $display, // CSS Property - Default inline-block
// $width, // CSS Property - Default $size
// $height, // CSS Property - Default $size
);
}
.icon2 {
@include smart-svg.show-circle(/* arguments is alias of show-square() with $border-radius 50% */);
}
.icon3 {
@include smart-svg.show-square(
// URL or Base64(Data URI scheme) or var(--url)
"https://cdn.svgporn.com/logos/react.svg",
// $size // Alias to $width and $height - Default null
// $background-color, // Shape background color - Default null
// $fill-color, // SVG fill color - Default null
// $background-image, // Shape image(ex. linear-gradation) - Default null
// $fill-image, // SVG fill image(ex. linear-gradation) - Default null
// $border-radius, // CSS Property - Default 25%
// $display, // CSS Property - Default inline-block
// $ratio, // Ratio of element size to SVG - Default 1.4
// $width, // CSS Property - Default $size
// $height, // CSS Property - Default $size
// $svg-size, // Alias to $svg-width and $svg-height - Default null
// $svg-width, // SVG width - Default $svg-size
// $svg-height, // SVG height - Default $svg-size
// $border-style, // CSS Property - Default null
// $border-width, // CSS Property - Default null
// $border-color, // CSS Property - Default null
);
}
.with-icon {
&::before,
&::after {
@include smart-svg.show-with-pseudo(/* arguments is alias of show() */);
}
}
```
# Demo
How to check the operation in the storybook.
```
git clone git@github.com:misuken-now/smart-svg.git
cd smart-svg
yarn
yarn start
```
# Browser Support
Available on browsers that support mask-image.
IE11 is not supported.
When specifying URLs in custom properties, absolute paths must be used because [until Safari 14 there is a bug](https://zenn.dev/misuken/articles/adf0a3072560ea) in resolving relative paths.
# Notes
Please note the following when using it.
- `show-circle()` `show-square()` `show-with-pusedo()` cannot be applied to `