CODEWITHSUNDEEP
csssvg
lyhong
lyhong

Reputation: 947

Apply different CSS to <use> tag from one symbol svg?

I defined an svg icon like this

<svg style="display: none">
  <symbol id="icon-check-mark-3" viewBox="0 0 200 200">
    <title>check-mark-3</title>
    <path fill="#fcc083" class="path1 fill-color2" d="M99.875 11.584c-48.968 0-88.666 39.697-88.666 88.666s39.698 88.666 88.666 88.666 88.666-39.698 88.666-88.666c0-48.969-39.698-88.666-88.666-88.666zM150.97 69.963l-48.493 67.173c-4.055 5.62-12.535 5.618-16.59 0l-25.396-35.181c-3.307-4.582-2.273-10.978 2.307-14.284 4.584-3.306 10.977-2.272 14.283 2.307l17.101 23.69 40.197-55.68c3.305-4.582 9.699-5.615 14.282-2.306 4.582 3.306 5.616 9.701 2.308 14.281z"></path>
  </symbol>
</svg>


<p id="first">my first image
  <use xlink:href="#icon-check-mark-3"></use>
  </svg>
</p>

<p id="second">my second image
  <use xlink:href="#icon-check-mark-3"></use>
  </svg>
</p>

I need to color the #first icon in red.

I have spent nearly 2 hours to find the way to do this but I can't.

Upvotes: 2

Views: 80

Answers (2)

3rdthemagical
3rdthemagical

Reputation: 5350

Use fill="currentColor" to set color to your svgs by color css attribute.

.red {
  color: red;
}

.green {
  color: green;
}

svg {
  width: 12px;
  height: 12px;
}
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="12" height="12" viewBox="0 0 12 12">
  <path fill="currentColor" id="delete" d="M7.249,5.977 C7.249,5.977 11.863,10.606 11.863,10.606 C11.978,10.724 11.975,10.917 11.856,11.039 C11.856,11.039 11.036,11.877 11.036,11.877 C10.917,11.998 10.726,12.001 10.611,11.883 C10.611,11.883 5.992,7.248 5.992,7.248 C5.992,7.248 1.308,11.850 1.308,11.850 C1.194,11.966 1.005,11.963 0.887,11.843 C0.887,11.843 0.076,11.014 0.076,11.014 C-0.043,10.893 -0.046,10.701 0.069,10.584 C0.069,10.584 4.659,5.977 4.659,5.977 C4.659,5.977 0.069,1.368 0.069,1.368 C-0.046,1.251 -0.043,1.060 0.076,0.939 C0.076,0.939 0.887,0.110 0.887,0.110 C1.005,-0.011 1.194,-0.013 1.308,0.104 C1.308,0.104 5.992,4.704 5.992,4.704 C5.992,4.704 10.611,0.070 10.611,0.070 C10.726,-0.048 10.917,-0.045 11.036,0.076 C11.036,0.076 11.856,0.914 11.856,0.914 C11.975,1.035 11.978,1.230 11.863,1.347 C11.863,1.347 7.249,5.977 7.249,5.977 Z" />
</svg>

<p class="red">
  <svg>
    <use xlink:href="#delete"></use>
  </svg>
  red
</p>

<p class="green">
  <svg>
    <use xlink:href="#delete"></use>
  </svg>
  green
</p>

Upvotes: 1

web-tiki
web-tiki

Reputation: 103770

First, you are missing the <svg> opening tag in your paragraphs. Second, you need to remove the fill property on the symbol, then you will be able to specify the color of each svg with CSS like this :

#first svg {
  fill: red;
}
#second svg {
  fill: #fcc083;
}
<svg style="display: none">
  <symbol id="icon-check-mark-3" viewBox="0 0 200 200">
    <title>check-mark-3</title>
    <path class="path1 fill-color2" d="M99.875 11.584c-48.968 0-88.666 39.697-88.666 88.666s39.698 88.666 88.666 88.666 88.666-39.698 88.666-88.666c0-48.969-39.698-88.666-88.666-88.666zM150.97 69.963l-48.493 67.173c-4.055 5.62-12.535 5.618-16.59 0l-25.396-35.181c-3.307-4.582-2.273-10.978 2.307-14.284 4.584-3.306 10.977-2.272 14.283 2.307l17.101 23.69 40.197-55.68c3.305-4.582 9.699-5.615 14.282-2.306 4.582 3.306 5.616 9.701 2.308 14.281z"></path>
  </symbol>
</svg>
<p id="first">my first image
  <svg>
    <use xlink:href="#icon-check-mark-3"></use>
  </svg>
</p>

<p id="second">my second image
  <svg>
    <use xlink:href="#icon-check-mark-3"></use>
  </svg>
</p>

Upvotes: 3

Related Questions