desygner-icons v1.0.0

Desygner icons library.

You can check latest icons version on https://s3.amazonaws.com/assets.webrand.com/icons/{version}/sprites/symbol/example.html

Installation

run in the root directory

• install dependencies

npm install

• copy default environment variables

cp .env .env.local

How to run it

run using node (v9+) in the root directory:

node src/index.js <command> ...options

Naming conventions

When naming icons, name them according to what the icon is rather than the action it will be used for, so they can be reused if needed.

Rules

• Use lower caps for the name
• If the name contains multiple words, use a dash (-) to separate them
• If the icon has variants (alert info, alert triangle), use the main name and then three dashes before the variant. e.g. alert---triangle
• Don't use prefixes such as desygner or icon, they are all icons of Desygner.

Full example of build - manual upload

1. Extract icon(s) from Figma Desygn System Icons' Library (they're usually 24x24) and donwload it (Watch video).
2. Add icons to the repo

node src/index.js add-all desygner ~/Desktop/'*.svg'
# Or use: npm run add-all

3. Bump version if needed (config.json) and commit changes

git add .
git commit -m "Added x,y,z icons. Bumped version to vXX)

4. Publish / generate the folders to upload to S3 (manually)

node src/index.js publish desygner ~/Desktop/icons
# Or use: npm run publish

5. Push your changes
6. Upload created folders (sprites & svgs) to S3 -> assets.webrand.com/icons/vXX. (Don't forget to make them public)
7. Update the link to the new version in whichever repository you are using the icons.

• For instance, on desygner-business icons are requested from desygner-components and, specifically from icon-sprite.js

More information

• Extra configuration for more complex operations
• Available scripts