- Get the lastest pull
git pull
- Install all the dependencies
yarn
- Now build it.
yarn build
-
Make sure the main color/stroke color of the svg is #E2E2E2. Otherwise, it will not work properly.
-
Put the new SVGs in
/src/new-svgs
. -
Run
sh generate.sh
. This will generate asrc/new-components
andsrc/new-stories
with icon components, and stories respectively. -
Inside the newly created components, update any additional icon variant and secondary colors with the correct prop names. Make sure to add correct types.
-
Once, tested and satisfied, move the component from
src/new-components
to the right folder -src/icons/[subfolder]
, and stories fromsrc/new-stories
tosrc/stories
. (Also update the stories titles - the default is New) -
Now run
sh export.sh
. This will export the newly created components, ready to be used.
Inside the stories - The import of newly created component should look like this -
import { NewlyCreatedComponent } from '../icons'
You are all set
Many icons have secondary colors - background color, accent color etc. Make sure to modify the component with correct props name background color - bgColor accent color - accentColor.
Every icon component have three type - 'primary' | 'secondary' | 'tertiary' by default Keep only primary if there is only one icon type. Add types if there the component have secondary colors such as bgColor or accentColor
Stories are automatically generated when you run sh generate.sh
.
New stories will have prefix folder name as NEW. Make sure to change this as per your require.
Also, remember to import icon correctly from the icon folder.
Live storybook: "https://65bb4c7b2d4e48c0410f5829-cenawazgya.chromatic.com/?path=/story/culling-addfoldericon--default&globals=backgrounds.value:!hex(333333)"
run yarn chromatic
Chromatic Dashboard: https://www.chromatic.com/build?appId=65bb4c7b2d4e48c0410f5829&number=3
-
Import from '@aftershootco/unicorn-icons'
-
Props - size, color, fillColor (icons with fill), variant (if icon have more than one variant), bgColor (icon with bg), inActive (make icon color dull, this will have more priority than color props)
-
on hover effect example
<button className='group' onClick={props.onClose}> <CloseIcon size={14} color='#777777' className='group-hover:[&_*]:fill-white group-hover:[&_*]:stroke-white' /> </button>