@aredotna/icons

@aredotna/icons is the canonical source for icons used at Are.na, and serves as an automatic build pipeline for generating JSX representations of .svg sources that can easily be imported into React apps.

Meta

• State: production
• GitHub: https://github.com/aredotna/icons
• CI/Deploys: Manually published to NPM for the time being
• Point People: @dzucconi

Installation and Usage

yarn add @aredotna/icons

And then later, import icons like so:

import ArenaLogo from "@aredotna/icons/ArenaLogo"

const MyApp = () => {
  return <ArenaLogo />
}

Adding New Icons

We've setup the repo so that adding new icons and publishing to NPM is as automated as can be:

1. Clone the repo: git clone https://github.com/aredotna/icons.git
2. Create a new branch: git checkout -b add-new-icon
3. Copy your new icon .svg file into the src folder (and follow pre-existing naming conventions! 🙏)
4. Push your branch up to GitHub and open a PR. This should automatically be tagged with a minor label indicating a new feature addition
5. Merge PR. This will automatically generate JSX components and publish to NPM, and additionally update the docs
6. Once published, a new comment will be added to the PR announcing the new version.

Development

yarn install
yarn build
yarn docs