Polaris-react: Unable to use Icons from Polaris Icons 3.0.1.sketch in the Icon component

[ptcampbell]

How do I enable the extended Icon set (illustrated in Polaris Icons 3.0.1.sketch) in the Icon component? It seems to have a limited set.

[dleroux]

Hi @ptcampbell we don't include all the icons in the bundle to avoid it becoming too big. You can use the Icon and give it an source like this:

<Icon source={{ body: "<path d='M17 9h-6V3a1 1 0 1 0-2 0v6H3a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2' fill-rule='evenodd'/>", viewBox: '0 0 20 20', }} />

[ptcampbell]

Thanks @dleroux — this would require exporting each icon's paths — are there self contained SVG files for each icon somewhere? The Sketch file is not easy to consume. How does Shopify use the larger set?

[kaelig]

Hi @ptcampbell! We're working on https://www.npmjs.com/package/@shopify/polaris-icons (currently in beta), which will allow you to consume additional icons in your Polaris projects.

We'll document usage guidelines and icon availability in the coming weeks / months.

Watch this space! 💜

[kaelig]

Polaris icons are now all available via a new npm package called @shopify/polaris-icons. Find them alongside usage instructions at https://polaris-icons.shopify.com 💟