[$400] You can't use .svg as background images. All icons in the interface should be inserted as inline HTML/SVG tags.

[vic-georgiev]

Multiple instances of using .svg images as background images in CSS. WE DO NOT ALLOW THAT.

We should always use the SVG react include way so we can modify the SVG properties. Please fix all of the instances where we have inserted .SVG as css background: url(..)

Example

@vikasrohit @gondzo please make sure our acceptance of a bug solution doesn't break this rule.

[ThomasKranitsas]

@vic-topcoder @gondzo there are 106 occurrences of SVGs in SCSS. This will take some time to be fixed.

Is that urgent for 05 or can be moved to 06?

[vic-georgiev]

Moving to 06

[vic-georgiev]

@vikasrohit @birdofpreyru @gondzo @ThomasKranitsas - let's make sure that we're using a standard way of inserting .SVG into the code. This is a good candidate to refactor the entirety of .SVG used in Connect and create a documented way for further reference.

We discussed component vs. directly passing .SVG to webpack - do we have a consensus on how we should proceed with this one going forward?

The problem I see with the component is that it wraps the .SVG into a <i> tag with the same class all the time (class=icon) which makes it hard to modify the individual properties of the .SVG images passed.

I guess that probably wrapping the SVG in <object /> is probably the best - we can cache the resources and reduce code generation - than use of <svg> directly. Reference: https://svgontheweb.com/#implementation.

• We need to use only one standard throughout all Topcoder react apps.
• We need to generate unique class for each .SVG so we can access and modify it through CSS.
• The refactor should happen system-wide for all instances of .SVG images.
• We should document the correct way to insert SVG assets into react components as part of the task.

[birdofpreyru]

We use babel-plugin-inline-react-svg inside Community App. It works good and with no visible issues; I believe the last time we talked about it related to Connect App, the main point about keeping using a dedicated component for SVGs in Connect App was that it will demand less re-factoring.

[gondzo]

ok, let's adopt community app approach with babel plugin.
refactoring will affect a lot of files so please rebase your PR against dev branch before submitting