@arduino/react-icons
v0.1.2
Published
Allows Arduino developers to use the Arduino icons
Downloads
256
Keywords
Readme
@arduino/react-icons
@arduino/react-icons is a library to import and use arduino icons 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 <h1>Hello, {props.name} <IconAccountActivity></h1>;
}
Development
Under the hoods this library is automatically generated. The script scripts/generate-icons.js
does the following things:
- retrieves informations from Figma, using the
FIGMA_ICON_FILE_ID
andFIGMA_API_ACCESS_TOKEN
environment variables - downloads all icons in svg format
- transforms them using svgr in react components
- 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
Grab the
FIGMA_ICON_FILE_ID
from Figma (at the moment the id is7mUivQVGz0ONtdYnZPa5Ld
. It can easily be extracted from the share URL of the Figma file.)Grab the
FIGMA_API_ACCESS_TOKEN
from figma (Settings > Personal Access Tokens)Make sure the
node_modules
is updatednpm ci
Export the environment variables
export FIGMA_API_ACCESS_TOKEN=xxxxxx && export FIGMA_ICON_FILE_ID=7mUivQVGz0ONtdYnZPa5Ld
Run the script
npm run gen
Credits
Sebastian Hunkeler had the idea and wrote the scripts/generate-icons.js to retrieve the icons from figma