@sport-activities/springboard-icons
v1.3.1
Published
Springboard icons
Downloads
14
Readme
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.