edenspiekermann / sprite.sh Goto Github PK

View Code? Open in Web Editor NEW

328.0 13.0 12.0 44 KB

A Bash script to build a SVG sprite from a folder of SVG files (typically icons).

License: MIT License

Ruby 19.21% JavaScript 80.79%

sprite.sh's Introduction

spritesh

A Node.js script to build a SVG sprite from a folder of SVG files (typically icons).

Install

npm install spritesh -g

gem install spritesh

Or you know, you can also just copy the script.

Usage

Usage: spritesh [options]
Script to build a SVG sprite from a folder of SVG files.
Options:
  -h, --help             Shows this help
  -q, --quiet            Disables informative output
  -i, --input [dir]      Specifies input dir (current dir by default)
  -o, --output [file]    Specifies output file ("./sprite.svg" by default)
  -v, --viewbox [str]    Specifies viewBox attribute (parsed by default)
  -p, --prefix [str]     Specifies prefix for id attribute (none by default)

Examples

Generate sprite.svg from SVG files in current folder (all defaults).
```
spritesh
```
Generate sprite.svg from SVG files in assets/images/icons.
```
spritesh --input assets/images/icons
```
Generate _includes/icons.svg from SVG files in current folder.
```
spritesh --output _includes/icons.svg
```
Generate sprite.svg from SVG files in current folder with a view box of 0 0 16 16.
```
spritesh --viewbox "0 0 16 16"
```
Generate sprite.svg from SVG files in current folder with id attributes prefixed with i_.
```
spritesh --prefix i_
```

SVG Optimisation

spritesh is a teeny tiny Bash script that takes care of SVG files concatenation; it does not perform any SVG optimisation. I recommend you add svgo (or similar tool) to your workflow to have an optimised and efficient SVG sprite.

An example that starts with improving the SVG files, then build a sprite could be:

svgo -f assets/images/icons && spritesh -i assets/images/icons

Accessibility

spritesh doesn’t help with SVG icons accessibility in itself. It is the responsibility of the developer (a.k.a you) to make sure the original icon files are including the relevant accessibility bits: a <title> tag with and id attribute.

For instance, a logo.svg icon could look like this:

<svg …>
  <title id="icon-brand-name">Your company/product name here</title>
  <!-- SVG content -->
</svg>

Which will generate this sprite (where icon- is the --prefix option):

<!-- sprite -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="icon-brand" viewBox="0 0 20 20">
    <svg …>
      <title id="icon-brand-name">Your company/product name here</title>
      <!-- SVG Content -->
    </svg>
  </symbol>
  <!-- Other symbols -->
</svg>

Later on, when using the sprite through <svg>/<use>, add an aria-labelledby attribute to the <svg> element referencing the relevant <title> id.

<svg class="logo" aria-labelledby="icon-brand-name">
  <use xlink:href="#icon-brand"></use>
</svg>

sprite.sh's People

Contributors

Stargazers

Watchers

Forkers

dzmuh landsurveyorsunited markpj1 dmak78 v09-software mukeshselvaraj tatyanakuchuk castrog microflash marclr

sprite.sh's Issues

Extra svg tags?

I seem to be getting an extra svg element within the symbol, not sure if this is required?

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id='phone' viewBox='0 0 512 512'>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      ...etc...
    </svg>
  </symbol>
  <symbol id='phone' viewBox='0 0 512 512'>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
      ...etc...
    </svg>
  </symbol>
</svg>

I was expecting it to output:

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id='phone' viewBox='0 0 512 512'>
    ...etc...
  </symbol>
  <symbol id='email' viewBox='0, 0, 512, 512'>
    ...etc...
  </symbol>
</svg>

Replace fs-promise with fs + promisify

warning spritesh > [email protected]: Use mz or fs-extra^3.0 with Promise Support

"Cannot find the path" on Windows

I assume Windows is not supported due to Shell? I’m using Cmder, which I think, provides Unix commands but I don't know if that's relevant in this case.

Iterate on SVG files only

Consider npm package

Would it be interesting to have it as a npm package to be able to install it easily in a project?

npm install spritesh -g
spritesh icons/*

Pipe files

Hi.

Would it be possible to pipe files into sprite.sh?

Cheers

symbol should not contain svg

Cool project - the more workflows we have to easily produce svg sprites, the better.

I have a few suggestions for improvement:

It would be good if sprite.sh wouldn't force all icon to have the same viewbox, but rather if by default if checked for the original SVG's viewbox and set it on the symbol. There could be an option for normalizing the viewbox, but I don't think it should be the default as there are many use cases in which it is counter productive (E.g., when different icons have different aspect ratios).
I think it is somewhat dangerous to automatically infer a <title> from the file name, as asstive technology may read it out loud. Also, I'm not sure how useful it is, as many screen readers don't automatically read the title, but rather depend on the aria-labeledby attribute. The generated <title> tag can not be refereed, since it has no id.
I think it would be better if the generated sprite.svg, did not contain the original svg inside it, as there is simply no need for it, and it adds extra weight to the generated sprite.

to sum up, I would suggest that the following svg

<!-- brand.svg -->
<svg version="1.1" 
         id="Ebene_1" 
         xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink" 
         x="0px" y="0px"
         width="20px" height="20px" 
         viewBox="0 0 20 30" 
         enable-background="new 0 0 20 30" 
         xml:space="preserve">
  <!-- content -->
</svg>

Would be transformed into:

<svg xmlns='http://www.w3.org/2000/svg' style='display: none;'>
  <symbol id='icon-brand' viewBox="0 0 20 30">
      <!-- Content -->
  </symbol>
 <!-- Other symbols -->
</svg>

This saves quite a lot of redundant code, and could end up pretty meaningful when generating a sprite with many different icons.

Gradients not visible

Hello and thanks for the awesome tool.
I have a minor issue when a svg is using a gradient defined in defs.
The issue is caused by the display: none style set to the svg sprite and prevents the gradients from showing therefore making the svg unusable.
A workaround for this is to replace the display: none style with something like width: 0; height: 0; position: absolute; visibility: hidden;.
I can submit a PR if you are interested in changing this.

SVG version and aria hidden

The code urrently outputs
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">

I was thinking adding the version and 'xmlns:xlink' and perhaps aria-hidden="true"?
e.g.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" aria-hidden="true">

This is just for the main svg tag.