@core-ds/icons

• Reference
• Figma

Installation

npm install @core-ds/icons

Usage

React

import { AlertCircle } from '@core-ds/icons/16' // Import 16px icons
import { Clipboard } from '@core-ds/icons/24' // Import 24px icons

function Example() {
  return (
    <div>
      <AlertCircle />
      <Clipboard />
    </div>
  )
}

PHTML

<?= coreIcon('alert-circle', 16) ?>
<?= coreIcon('clipboard', 24) ?>
<?= coreIcon('alert-circle') ?> <!-- Defaults to 16 if no size is specified. -->

Contributing

Local development setup

Follow these steps to get the project setup on your local machine:

# Clone repo
git clone https://github.com/iFixit/core-icons.git
cd core-icons

# Install dependencies
npm install

# Add your Figma access token (generate an access token using the instructions below)
echo "FIGMA_TOKEN=<paste-your-token-here>" > .env
# This token gives us access to the Figma API which
# allows us to export icons directly from a Figma file.

Generating a Figma access token

1. Login to your Figma account.
2. Head to the Account Settings from the top-left menu inside Figma.
3. Find the Personal Access Tokens section.
4. Click Create new token.
5. A token will be generated. This will be your only chance to copy the token, so make sure you keep a copy of this in a secure place.

See Figma's developer docs for more information.

Adding or updating an icon

1. Update the Figma file

If a designer has already updated the Figma file, you can skip to step 2. If not, open the Core Icons Figma file and make your changes. Reach out on Slack if you're having trouble opening the Figma file.

2. Create a new branch

Create a new branch for your changes:

git checkout -b <branch>

3. Pull changes from Figma

Pull in the latest changes from the Figma file by running:

npm run figma-pull

4. Review, commit and push changes

Review the changes made by figma-pull. If everything looks good, commit and push the changes:

git add .
git commit -m <message>
git push

5. Open a pull request

Use GitHub to create a pull request for your branch.

6. Bump the package version

After your pull request has been approved, bump the package version by running:

npm version [patch | minor | major]

npm version will bump the version and write the new data back to package.json and package-lock.json. It will also create and push a version commit and tag.

Note: In the context of Core Icons, significant changes to the library or workflow, or removing an icon would be considered a major update, adding a new icon would be considered a minor update, and fixing an icon would be considered a patch. Non-code changes (e.g. documentation) do not require a version bump.

7. Merge into master

After your pull request has been approved and the package version has been bumped, go ahead and merge the pull request into master. You don't have to worry about publishing to npm because we have a GitHub action set up to automatically publish the package when a commit is pushed to master.

8. Create a release

After your pull request have been merged, create a new release to document your changes. Use the tag you generated in step 6 to create the release.

Done 🎉