search

jhamlet / svg-react-loader

Webpack SVG to React Component Loader
MIT License
559 stars 82 forks source link

Strip or "simplify" imported SVGs #17

Closed nfarina closed 8 years ago

nfarina commented 8 years ago

This is just an idea; feel free to close!

I'm currently looking at a designer-friendly workflow of creating icons in Sketch, exporting them to individual SVG files, then including them in my React app via svg-react-loader (which is awesome).

One desirable feature of "icon" artwork specifically is the ability to treat the shapes as "uncolored" by default, then apply the current text color via the CSS fill: currentcolor property. Currently I'm manually stripping out color-related attributes from the raw SVG source. But it would be really handy if this plugin could optionally do this for me!

Additionally, Sketch exports "extraneous" SVG elements like title and desc which just bloat the final DOM. Would be great to remove these as well.

jhamlet commented 8 years ago

@nfarina Thanks for the ideas and the nice comments.

There are two other issues I want to resolve: #11, and #12 which might address some of the things you want to do.

#11 would change the loader API quite a bit, as it would expect an object tree representing the XML/SVG, but it would open up the pipeline so you can insert an intermediate loader to "transform" the tree to do whatever you would like... this is still on my drawing board.

In the meantime, have you checked out svgo and its associated loader?

;-j

nfarina commented 8 years ago

Oh wow - svgo is exactly what I needed! I just put it on the front of my pipeline and it does everything I want. Feel free to close this and thanks for pointing out that module.

jhamlet commented 8 years ago

np.

I use it as a "preloader" in webpack.