https://github.com/arduino/react-icons

react-icons
https://github.com/arduino/react-icons

Last synced: 16 days ago
JSON representation

react-icons

• Host: GitHub
• URL: https://github.com/arduino/react-icons
• Owner: arduino
• License: agpl-3.0
• Created: 2021-11-17T13:57:57.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-12T16:38:27.000Z (8 months ago)
• Last Synced: 2024-10-08T09:51:09.063Z (about 1 month ago)
• Language: TypeScript
• Size: 1.03 MB
• Stars: 0
• Watchers: 11
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @arduino/react-icons

@arduino/react-icons is a library to import and use [arduino icons](https://zeroheight.com/59f8e25cb/p/07e4d9-iconography/b/9209b0) as react components

All icons inherit the color of the text whenever it was black in the original icon.

## Installation and usage

Include in your project with npm or yarn

    $ npm install @arduino/react-icons --save

And import and use the component

    import { IconAccountActivity, IconWarning } from '@arduino/react-icons';

    function Welcome(props) {

        return 
Hello, {props.name} 
;

    }


## Development

Under the hoods this library is automatically generated. The script `scripts/generate-icons.js` does the following things:

1. retrieves informations from Figma, using the `FIGMA_ICON_FILE_ID` and `FIGMA_API_ACCESS_TOKEN` environment variables

2. downloads all icons in svg format

3. transforms them using [svgr](https://react-svgr.com/) in react components

4. constructs an index.ts to export them all

### Update the icons

Whenever you need to update the icons and release a new version of the library, follow these steps

1. Grab the `FIGMA_ICON_FILE_ID` from Figma (at the moment the id is `7mUivQVGz0ONtdYnZPa5Ld`. It can easily be extracted from the share URL of the Figma file.)

2. Grab the `FIGMA_API_ACCESS_TOKEN` from figma (Settings > Personal Access Tokens)

3. Make sure the `node_modules` is updated

    npm ci

4. Export the environment variables

    export FIGMA_API_ACCESS_TOKEN=xxxxxx && export FIGMA_ICON_FILE_ID=7mUivQVGz0ONtdYnZPa5Ld

5. Run the script

    npm run gen

## Credits

[Sebastian Hunkeler](https://github.com/sbhklr) had the idea and wrote the scripts/generate-icons.js to retrieve the icons from figma