Support for `style` prop without `styled-components`?

[mikestopcontinues]

Support for `style` prop without `styled-components`?

[mikestopcontinues]

Jacob, thanks for the tip! I do actually use a one of those react svg loaders, but your svg-icons repo is key. That way, I can make an alternate wrapper component to the type you export here. Very cool, and thanks again!

[jacobwgillespie]

Hey, definitely - two thoughts here:

First, technically you can use the style prop with Styled Icons already and it'll work, but it does also require styled-components, so that's not likely what you were looking for.

Second, the way I'm building the icon components here is by maintaining all the icon SVG files in the svg-icons repository, and then transforming those SVGs here into React components. That lets me put all the CI work into cleaning up and optimizing the SVGs into the svg-icons build, and just leave the React things here.

It's not well documented, but what I've been doing for recent projects myself is to directly import the SVG files from @svg-icons, and then configure Webpack with a SVG-to-React loader to build the React component at compile-time. Some example Webpack loaders:

• https://react-svgr.com/docs/webpack/
• https://www.npmjs.com/package/next-react-svg (I've used this with Next.js projects)

But you could use any loader for Webpack or Rollup or whatever your preferred builder might be to transform the SVGs into React components.

I haven't had time to build an icon browser website for @svg-icons, but it's all the same icons as Styled Icons here, so you can just use the same website.

After configuring the loader, you import like this:

// Replace either of these:
import {IconName} from '@styled-icons/pack'
import {IconName} from '@styled-icons/pack/IconName'

// with this (note that the icon filenames are kebab-cased):
import IconName from '@svg-icons/pack/icon-name.svg'

Importing the icon SVGs directly like this should already support style: <IconName style={{...}} />