Springboard Icons

Usage

Install with npm or yarn

npm i @sport-activities/springboard-icons

Import font-icon.css

<link rel="stylesheet" href="./node_modules/@sport-activities/springboard-icons/font-icons.css">

Use icon

<i class="icon-arrow-down"></i>

Development

Config:

• .svgo.yml: optimizer config
• .glyphs2font.yml font icon generator config

Add new icon

• Update font icon generator config file:

# .glyphs2font.yml

glyphs:
  - glyph:    ./icons/newIconName.svg
    name:     newIconName
    code:     0xE001 # increment this

• Optimize and build font icon

npm run build:prod

For windows users: Change path of the files imported in font-icons.css

• See your new icon in icons-reference.html PS: icons are red but it's just to test css color modification

Releasing

Release are prepare using release-it script.

npm i -g release-it
release-it

Know issues

Issue 1

For some icons, we can see rectangle like this:

Instead:

I think this problem is caused by Sketch export.

Solution

• Remove this line below in your svg icon before generate the font

<!-- icon.svg -->

<svg>
  <rect x="0" y="0" width="72" height="72"></rect> <!-- remove this -->
</svg>

Issue 2

Check complex icon with rotate or things like this, example:

The compilation:

<!-- icon.svg -->
<svg>
  <use transform="rotate(-45 16.012 11.1)" /> <!-- transform="rotate" is not interpreted in our font  -->
</svg>

Expected:

I think this problem is caused by Sketch export.

UPDATE:

This is really Sketch export because valid-tiny-bold looks good:

Issue 3

stroke-* properties aren't supported.

Solution

You have to export svg file as (computed) paths only using Sketch or Illustrator.