Set HTML attribute on a partial parent or resource string

support
1

Context: I’m coming off years of Vue/React or otherwise JSX-like components when it comes to building front-ends, but years of Rails ERB templates before that :).

I’m importing an SVG with attribute stroke="#000" … I want to set that stroke to a different value.

In Vue, I’d do something like <my-svg-component stroke="red"> and it would override. I understand in Vue I’m dealing with something closer to a DOM object and not a mere template string.

Is there an equivalent to doing this in Hugo? I could also imagine adding class names to the outermost element of a partial import, etc.

2

I’m not sure that I understand what you mean by “importing an SVG”. But maybe this

helps, especially the part under the subheading “attribute”. Make sure to turn on block for the parser (as shown in the Goldmark configuration).

3

Personally I would set the value to currentColor in the svg. That way it is reusable and trivial to change the colour by simply setting a colour value on the containing element, as the svg will just inherit that.

e.g: .my-icon_container {color: #f00;} also means you can .my-icon-container:hover, .my-icon-container:focus {color: 'hot pink'}.

Furthermore, applying #000 to an svg is not required, they are black by default.

4

The svg is from an open source collection, not my own, and my example was an example. The actual strokeColor is something else.

5

These are the icons: GitHub - gohugoio/hugo-mod-heroicons: Work In Progress: Provides Heroicons as a simple to use Hug

They are being used as a module.

That does look helpful, thank you.