@apify/icons

Apify shared icons

We use SVGR to convert .svg files into React components (.jsx).

The size should be defined in the icon so we don't break anything on frontend. We should only have size 16 and 20 icons (with some exceptions) and this should be set in the name (so the export can auto-generate it): e.g. circle_20.svg.

How to add icons

1. Add the SVG file to the ./icons_svg folder. Make sure the name includes the icon's size and matches the id in the SVG code. If the SVG contains something like the code 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 ./svgr_output 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.

Compiler

To enable tree shaking without breaking the directory into folders, we are using tsup. Until we get rid of Node 14, we're stuck with v6.6.3.

On tsup update

It looks like first icon alphabetically is not being exported to index.d.ts file. To fix that, we added first (zeroth?) placeholder icon aaa_ts_placeholder.svg - if they fix it, we can remove it.