I’m embedding the following SVG icon as a path in my HTML page:
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>
How can I include the above SVG icon path
as a class
in CSS? So I can just use it as an attribute
in my HTML page like this:
<i class="chevron-right"></i>
Solution
Use it as background:
.chevron-right {
display: inline-block;
width: 1rem;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain no-repeat;
}
.chevron-right::before {
content: "";
display: block;
padding-top: 100%;
}
<i class="chevron-right"></i>
<i class="chevron-right" style="width:2rem"></i>
<i class="chevron-right" style="width:4rem"></i>
Alternative:
In case you want coloration consider mask:
.chevron-right {
display: inline-block;
width: 1rem;
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain;
background: currentColor;
}
.chevron-right::before {
content: "";
display: block;
padding-top: 100%;
}
<i class="chevron-right"></i>
<i class="chevron-right" style="width:2rem;color:red;"></i>
<i class="chevron-right" style="width:4rem;color:blue;"></i>
Alternative 2:
Using SVG as background image With my solution you’re able to get something similar: Here is bulletproff solution: Your html: <input class='calendarIcon'/>
Your SVG: i used fa-calendar-alt (any IDE may open svg image as shown below)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/>
</svg>
To use it at css background-image you gotta encode the svg to address valid string. I used this tool (name: URL Decoder—Convert garbled address) As far as you got all stuff you need, you’re coming to css
.calendarIcon{
//your url will be something like this:
background-image: url("data:image/svg+xml,***<here place encoded svg>***");
background-repeat: no-repeat;
}
Note: these styling wont have any effect on encoded svg image
.{
fill: #f00; //neither this
background-color: #f00; //nor this
}
because all changes over the image must be applied directly to its svg code <svg xmlns="" path="" fill="#f00"/></svg>
To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:
.calendarIcon{
background-image: url("data:image/svg+xml,%3Csvg...svg%3E");
background-repeat: no-repeat;
padding-right: calc(1.5em + 0.75rem);
background-position: center right calc(0.375em + 0.1875rem);
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
URL-encoder for SVG [Inline SVG CSS]:
https://yoksel.github.io/url-encoder/
My solution included https://yoksel.github.io/url-encoder/ You just simply insert your svg and getting back background-image code
We can use SVG in CSS via data URI, but without encoding it works only in Webkit based browsers. If encode SVG using encodeURIComponent()
it will work everywhere. 🛸 Url-encoder, useful for SVG
SVG must have attribute xmlns like this: xmlns='http: //www.w3.org/2000/svg'
. If it doesn’t exist, it will be added automagically.
Encoded SVG can be used in background
, in border-image
or in mask
(live demo https://codepen.io/yoksel/full/WNrLpYW ).
- Take
svg
. - Encode it with url-encoder.
- Use code as
background-image
orborder-image
ormask
. - Enjoy!
Inline SVG In CSS Usage:
.fa-linkedin { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z' fill='white'/%3E%3C/svg%3E") 0/contain no-repeat; margin:auto; width: 1.5rem; }
- https://stackoverflow.com/questions/65453752/svg-icon-path-class-in-css
- https://stackoverflow.com/questions/10768451/inline-svg-in-css
- https://stackoverflow.com/questions/9185434/using-svg-as-background-image
CSS in SVG in CSS: Shipping confetti to Stack Overflow’s design system