SVG sprite details

Auto generating sprite file

DEKOMORI use "svg-sprite"(https://github.com/jkphl/svg-sprite).

put the svg file in the svgSprite folder in the assets, will be automatically generate sprite file.

It separates two kinds of sprites which keep SVG fill and remove SVG fill.

Sometimes want to use original svg, and sometimes want to control fill from CSS.
If you want to control Fill from CSS, must remove Fill.

src

./build/src/
└── assets
    └── svgSprite
        ├── keepFill
        │   ├── dekomori-logo-bottomType.svg
        │   ├── dekomori-logo-sideType.svg
        │   ├── dekomori-logo-symbol.svg
        │   └── dekomori-logo-type.svg
        └── removeFill
            ├── dekomori-logo-bottomType.svg
            ├── dekomori-logo-sideType.svg
            ├── dekomori-logo-symbol.svg
            └── dekomori-logo-type.svg

dest

./build/dest/
└── assets
    └── svgSprite
        ├── keepFill
        │   └── symbol
        │       ├── sprite.preview.html
        │       └── sprite_keepFill.svg
        └── removeFill
            └── symbol
                ├── sprite.preview.html
                └── sprite_removeFill.svg

Preview svg sprite

HTML file for previewing the sprite is output together.
You can open the HTML file in your browser and check it.

svg-sprite option

Although "svg-sprite" has many options, it can easily make it with online editor.

http://jkphl.github.io/svg-sprite/#json

Recommend usage

There are various ways to usage SVG sprite, but recommended method is <use> in <svg>.

inline SVG usage

<svg class="logo-svg">
  <title>Logo</title>
  <use xlink:href="/assets/svgSprite/keepFill/symbol/sprite_keepFill.svg#logo"></use>
</svg>

Polyfill

Internet Explorer 💩

IE can't external reference.

<use xlink:href="foo">

use these polyfills.

• https://github.com/jonathantneal/svg4everybody
• https://github.com/Keyamoon/svgxuse

DEKOMORI includes svgxuse in dependencies of package.json.