- From: LukeTOBrien via GitHub <sysbot+gh@w3.org>
- Date: Wed, 13 Apr 2022 07:21:52 +0000
- To: public-svg-issues@w3.org
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