Shared UI icons library

This is a drop-in replacement for @apify-packages/icons. We use SVGR to convert .svg files into React components (.tsx). The icon should always have viewBox attribute so it can be resized at will. Each icon component comes fully typed, when resizing one should always use size property.

How to add icons

1. Add the SVG file to the ./src/assets folder. If the SVG contains any definitions or any other sizing than viewBox (as example below), please delete it.

<defs>
<clipPath id="clip0_2206_16395">
<rect width="16" height="16" fill="white"/>
</clipPath>
</defs>

2. BUILD THE PACKAGE

Since we don't add packages that often, this step should be manual. If you don't build 'em you can't use 'em.

So, what you need to do is:

npm run convert-icons

This will generate the JSX components in the ./src/components folder and auto-add them to the index so they can be exported. SVGR automatically replaces the fill values to currentColor, which will allow us to set the icon's color. It also adds the title prop, which is good for accessibility.

3. Add new icon to Storybook

Add your new icon to the src/icongraphy.stories.tsx file if you want to see it in Storybook.