Carbon: [Icons] Some SVGs have extra STO class affecting their use inline

[josh-tt]

Some SVGs have extra STO class affecting their use inline

What package(s) are you using?

Add an x in one of the options below, for example:
Vanilla JS + SVGs

Detailed description

Some SVGs have extra STO class affecting their use inline, as they spill out affecting other icons. Styles should be inlined on the SVGs, not on the class but the element.
Remove extra unnecessary definition style classes and inline them.

For example Paragraph SVG, Redo, Package svgs. Remove fills. The specificity is too high. Remove fill colors. '

[asudoh]

Seems that 10.5.0 did not have such <style> tag - CC @joshblack

[joshblack]

Hi @josh-tt! 👋Could you share details for how to reproduce the problem or what packages you're using where you are seeing this issue?

[josh-tt]

I'll have to ask the dev who reported it to me, but will let you know. Cheers

[josh-tt]

Here is the pen and description:
https://codepen.io/mrlescodes/pen/xxbvpKR

On Fri, Jan 31, 2020 at 11:28 PM Josh Black [e-mail]
wrote:

Hi @josh-tt https://github.com/josh-tt! 👋Could you share details for
how to reproduce the problem or what packages you're using where you are
seeing this issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/carbon-design-system/carbon/issues/5226?email_source=notifications&email_token=AHB5UMWP4NZF4JX53BGUQIDRAQ7QXA5CNFSM4KOBSQ5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKO7ZCA#issuecomment-580779144,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHB5UMVTVHZTRZRIKZAZG3DRAQ7QXANCNFSM4KOBSQ5A
.

[joshblack]

@josh-tt it seems like the example is not using SVG assets generated from one of the libraries and instead is using the source from svg, potentially. Is that the case? If so, these will be the unprocessed SVG assets and will have these attributes since they are generated by design tooling. For the icon libraries we ship, we end up transforming these source files so that they don't have this problem 👍

[josh-tt]

Thanks. The dev said that the use case is a bit different and the way they
are shipped can't be used unfortunately. He had to write a php wrapper to
include the svg directly to be used dynamically without javascript. Would
be good if the svgs were clean and ran through svgo, but we can do that on
our end. Thanks.

On Mon, Feb 3, 2020 at 10:09 PM Josh Black [e-mail] wrote:

@josh-tt https://github.com/josh-tt it seems like the example is not
using SVG assets generated from one of the libraries and instead is using
the source from svg, potentially. Is that the case? If so, these will be
the unprocessed SVG assets and will have these attributes since they are
generated by design tooling. For the icon libraries we ship, we end up
transforming these source files so that they don't have this problem 👍

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/carbon-design-system/carbon/issues/5226?email_source=notifications&email_token=AHB5UMT7ULIVJDDNI6QUV3LRBAXSFA5CNFSM4KOBSQ5KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKUF4BI#issuecomment-581459461,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AHB5UMU3TJCLPH5BG6CJHJLRBAXSFANCNFSM4KOBSQ5A
.

[josh-tt]

*Just a quick follow up on this from the developer as I think the confusion was perhaps related to outdated documentation *

1. Some links in Guidelines point here (with instructions to create the icons inline and messaging that say's they've been cleaned):

https://github.com/carbon-design-system/carbon-icons/blob/master/docs/usage.md
https://github.com/carbon-design-system/carbon-icons

1. And some links in https://www.carbondesignsystem.com/get-started/develop/vanilla/#scss
   points here https://github.com/carbon-design-system/carbon-icons

When I think it should link here:
https://github.com/carbon-design-system/carbon/tree/master/packages/icons
Or here:
https://www.npmjs.com/package/@carbon/icons

Thanks

[tw15egan]

@josh-tt Thanks for relaying that! I'm going to create an issue over on the website repo to update those links to hopefully avoid confusion in the future 👍