Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (smart-svg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

smart-svg

This is a SVG fast display library made of Sass with coloring support.

View the demo

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.

Usage

npm install smart-svg

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";
// <span className={classNames.icon} /> // Apply to span elements, not svg elements.
// <button className={classNames.button}>push</button>

API

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 in resolving relative paths.

Notes

Please note the following when using it.

show-circle() show-square() show-with-pusedo() cannot be applied to <svg> elements.
- Because pseudo-elements of <svg> elements are not visible.
CSS cannot be specified for child elements within an <svg> element (partial coloring or partial animation is not allowed).
- Because the element does not exist in the DOM.
When applied to a pseudo-element (show-with-pseudo()), background color and border cannot be specified.
- Because pseudo-elements cannot be used inside pseudo-elements.

LICENSE

@misuken-now/smart-svg・MIT