Skip to content

aftershootco/Unicons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

269feb5 · Jun 7, 2024
Jan 23, 2024
Nov 15, 2022
Jan 5, 2024
Jun 5, 2024
Jun 4, 2024
Jun 6, 2024
Jun 7, 2024
Jun 7, 2024
Jun 4, 2024
May 24, 2024
Jun 7, 2024
May 14, 2024
Jun 4, 2024
Jan 5, 2024
Nov 29, 2022
May 10, 2024
Mar 6, 2024
May 14, 2024
May 3, 2024
May 13, 2024
Jun 4, 2024
Jan 23, 2024
Feb 5, 2024
May 13, 2024
May 13, 2024
May 24, 2024
Jun 4, 2024
May 29, 2024

Repository files navigation

Unicorn Design System

Unicorn Icons

Unicorn Icons is Aftershoot's inbuilt library for using different icons with custom configurations in their Desktop app.

How to Build?

  1. Get the lastest pull
git pull
  1. Install all the dependencies
yarn
  1. Now build it.
yarn build

How to Generate Components

  1. Make sure the main color/stroke color of the svg is #E2E2E2. Otherwise, it will not work properly.

  2. Put the new SVGs in /src/new-svgs.

  3. Run sh generate.sh. This will generate a src/new-components and src/new-stories with icon components, and stories respectively.

  4. Inside the newly created components, update any additional icon variant and secondary colors with the correct prop names. Make sure to add correct types.

  5. Once, tested and satisfied, move the component from src/new-components to the right folder - src/icons/[subfolder], and stories from src/new-stories to src/stories. (Also update the stories titles - the default is New)

  6. 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

Control Secondary Color

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.

Practice for Correct Types

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

About Storybook

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)"

Publish storbook to Chromatic

run yarn chromatic

Chromatic Dashboard: https://www.chromatic.com/build?appId=65bb4c7b2d4e48c0410f5829&number=3

Using icon components Tips

  1. Import from '@aftershootco/unicorn-icons'

  2. 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)

  3. 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>

Contributors