@lushdigital/icons NPM

Icons

This repo contains all icons.

Storybook

Usage

Install

yarn add @lushdigital/icons

Include the component at the top of the component it's required in.

import Icon from '@lushdigital/icons';

Implement as follows

<Icon
  // Pass in name of icon. Required.
  icon='search'

  // Pass in a value to fill path. default: "currentColor"
  fill='#000'

  // Pass in size value, sets height & width. default: "16px"
  size='22px'
/>

Adding? Changing? Updaing?

Within this project a useful release script is avaliable. It allows you to automagically tag, push to git, publish to npm and deploy storybook... All you need to do it run: npm run release

Adding icon?

When adding an icon the key ingredient to make it work is ensure that the view box of the icon is 0 0 32px 32px.

The easiest way to achieve this is to open the icon/svg in illustrator.

Locate icon on cheatsheet
Locate icon in svg folder
Rename icon in svg folder to match cheatsheet name
Open icon in illustrator
Select icon
In the transform panel change make the largest axis 32px wide (ensure you constrain the proportions)
Click the artboard tool (shift + o)
In presets in the top bar select fit to selected art
Once you have done that ensure both height and width of artboard at 32px.
Export as SVG and you're done.
Copy <d> from newly saved svg
Add that raw data into the case swich in the src file
Remember to add a example in storybook
Run release script npm run release