How to access style properties of externally insert svg file?

Question

Here I can access the style of the svg:

svg {
  fill: skyblue;
}

<svg viewBox="0 0 100 100" width="500px" height="500px"
    xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
    <path d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z"/>
</svg>

But its style is not changed when svg is added as external file:

img {
  fill: skyblue;
}
/* etc. Not working
    img > svg {
      fill: skyblue;
    }
*/

<img src="brackets.svg" width="500px" height="500px">

Or; Can I somehow use the css root variable in the svg file? e.g. <svg fill="var(--textColor)" > </svg>

You cannot change a style of a ' src ' value. Svg element will NOT be added in html if you use it as src value. Img elements cannot have children. Just change the style of the svg inside the brackets.svg file. — Mihai T, Jan 22 '22 at 09:30
@MihaiT Can I somehow use the css root variable in the svg file? e.g. `var(--textColor)` — duck, Jan 22 '22 at 09:34
https://stackoverflow.com/questions/51395179/svg-fill-with-css-variables check this. might help you — Mihai T, Jan 22 '22 at 09:44

herrstrietzel · Accepted Answer · 2022-01-24T23:54:34.107

You can use a <use> element instead.
Give your path element an unique id and strip all fill attributes:

Svg markup

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
<path id="icon"
d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
</svg>

Use element in html
Use elements support external svg files.

<svg>
  <use href="icon.svg#icon" style="fill:red" />
</svg>

So you don't need to inline your assets/icons svg (some legacy browsers might still have issues with external svgs referenced in use)

Example (inlined svg just for circumventing CORS issues)

<svg style="display:none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" width="500px" height="500px" >
    <path id="icon"
    d="M6,6A2,2,0,0,1,8,4,1,1,0,0,0,8,2,4,4,0,0,0,4,6V9a2,2,0,0,1-2,2,1,1,0,0,0,0,2,2,2,0,0,1,2,2v3a4,4,0,0,0,4,4,1,1,0,0,0,0-2,2,2,0,0,1-2-2V15a4,4,0,0,0-1.38-3A4,4,0,0,0,6,9Zm16,5a2,2,0,0,1-2-2V6a4,4,0,0,0-4-4,1,1,0,0,0,0,2,2,2,0,0,1,2,2V9a4,4,0,0,0,1.38,3A4,4,0,0,0,18,15v3a2,2,0,0,1-2,2,1,1,0,0,0,0,2,4,4,0,0,0,4-4V15a2,2,0,0,1,2-2,1,1,0,0,0,0-2Z" />
    </svg>

<p>
<svg>
<use href="#icon" style="fill:red" />
</svg>
<svg>
<use href="#icon" style="fill:green" />
</svg>
</p>

Multiple icons
When using icons containing multiple elements (like in feather-icons library) I strongly recommend wrapping each icon definition in a <symbol>element.
This way you can have icons with different viewBox attributes:

button{
  background:#999;
  border:none;
  font-size:2em;
  border-radius:0.3em;
  padding:0.3em;
  color:#fff;
}

.icon-use{
  display: inline-block;
  width:1em;
  height:1em;
  font-size:1em;
  color:inherit;
  vertical-align:-0.1em;
}

.icon-green{
  color:green
}

<button type='button'>
  Download
  <svg class="icon-use">
    <use href="#icon-download" />
  </svg>
</button>

<button type='button'>
  Download .xls
  <svg class="icon-use icon-green">
    <use href="#icon-download" />
  </svg>
</button>

<button type='button'>
  Download .docx
  <svg class="icon-use" style="color:blue">
    <use href="#icon-arrow" />
  </svg>
</button>

<svg style="display:none" xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-download" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
  </symbol>
  <symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" y1="15" x2="12" y2="3"></line>
  </symbol>
</svg>

How to access style properties of externally insert svg file?

1 Answers1

Linked