Polaris-react: Export svg icons as a part of the npm module

[sivakumar-kailasam]

Issue summary

For anyone who's not using React & wants to use Polaris, one of the hurdles to get through is using the icons from the current node module since they're inlined inside the main module.

Expected behavior

Icons are exported alongside styles folder as svg files.

Actual behavior

Steps to reproduce the problem

• Install @shopify/polaris in any frontend app with yarn/npm
• Take a look at node_modules/@shopify/polaris/index.js. All the icons are inlined inside a massive module that requires libraries from the react ecosystem

Specifications

• Are you using the React components? (Y/N): N
• Polaris version number: 2.5.0
• Browser: All
• Device: All
• Operating System: All

---

[chloerice]

Hi @sivakumar-kailasam, thanks for raising this request. We intend to decouple the icons from the React component library, but we don't have a timeline for when they'll be available to consume separately at this time. For now I'd recommend cloning this repo so you can access and save the icons in your projects as needed.

We treat all feature requests as part of our backlog, so I’ll close this issue for now. We encourage everyone who wants this feature to add a 👍 to the original issue report. We take your collective interest into account when we look at what to work on next.

💜

[andrewpye]

@chloerice I've seen that @shopify/polaris-icons is now available as a stand-alone package which is super-exciting, but on investigation it seems to only be consumable by React apps since the exports are all generated by React.createElement. This is a bit of a disappointment to those of us that are using Polaris but not via React - for example, we use Ember.js, and have built @smile-io/ember-polaris as a means of using Polaris in our apps, but now there is no way for us to access the Polaris icons without a lot of extra effort (for reference, before @shopify/polaris-icons, we were using the SVG files in our apps without issue). Is there any plan to make the icons available in a framework-independent way? 🙏 Thanks!

[kaelig]

Hey Andy, thanks for asking!

We were just asking ourselves what the best way to enable non-React apps to use icons via @shopify/polaris-icons.

Aside from needing SVG files, can we make any pre-transforms that would help? (for example, we could pre-remove fill for all dark paths, and apply fill="currentColor" to backgrounds on major twotone icons, just like we do in the React version)? Alternatively, would you prefer the raw SVG files with no transforms?

[kaelig]

Reopening this as this is not only a feature request but also could be considered a regression since https://github.com/Shopify/polaris-react/pull/1042.

[andrewpye]

Thanks @kaelig! I think with the pre-transforms you mention is probably the most useful, so that we can use the icons and have them look the same as they do in the React components 🙂

[BPScott]

Hi folks, thanks for your patience. @shopify/polaris-icons v3.4.0 has just been released which contains processed svg files of all our icons.

Check runpkg to see the new contents: https://runpkg.com/?@shopify/polaris[email protected]/images/abandoned-cart_major_monotone.svg