[svgwg] SVG Parameters: <use> SVG icons in ShadowRoot (#880)

LukeTOBrien has just created a new issue for https://github.com/w3c/svgwg:

== SVG Parameters: <use> SVG icons in ShadowRoot ==
Link to draft spec: [SVG Parameters](https://www.w3.org/TR/SVGParamPrimer/)

Yesterday I stumbled upon the above spec and I wondered what people's thoughts are on it or if any progress has been made against the spec?

# Problem: <use> SVG icons in ShadowRoot

The problem I was looking into is that I am developing a web component control library, ad the moment I am using data URL encoded SVG icons as CSS variables:

```css
--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20px' height='20px' viewBox='0 0 24 24'%3E%3Cpath class='fslightbox-svg-path' d='M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z'%3E%3C/path%3E%3C/svg%3E");
```

And then I can use it in my WebComponent whenever I need to display the icon:

```css
#close-btn {
  background-image: var(--icon-close);
}
```

This solution works well as CSS variables can be accessed from within the ShodowRoot.  
However, I would like the SVG icon itself to be styled with CSS variables, like: `fill="var(--primary)"` or `stroke="var(--secondary)"`.  
So I was searching and the SVG Parameter spec seemed ideal for me.

## Alternative

The other alternative is to include the SVG icon into the document and `<use>` within the ShadowRoot like this:

> Note I am building a reusable control library so an app could have multiple controls on the page and ideally I cannot clone the icon's SVG and appending in each ShadowRoot, I only want the icon appended once.

```html
<svg>
  <symbol id="my-icon">
    <XXX fill="var(--primary)" stroke="var(--secondary)"/>
  </symbol>
</svg>

<my-element>
  :ShadowRoot:
  <button id="close-btn">
    <svg><use href="#my-icon"/></svg>
  </button>
  :ShadowRoot:
</my-element>
```

Please view or discuss this issue at https://github.com/w3c/svgwg/issues/880 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 13 April 2022 07:21:53 UTC