oppi.li
convert to mask based icon
+6
-4
src/styles/index.css
+6
-4
src/styles/index.css
···
14
}
15
16
.i-lucide-line-squiggle {
17
-
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxpbmUtc3F1aWdnbGUtaWNvbiBsdWNpZGUtbGluZS1zcXVpZ2dsZSI+PHBhdGggZD0iTTcgMy41YzUtMiA3IDIuNSAzIDRDMS41IDEwIDIgMTUgNSAxNmM1IDIgOS0xMCAxNC03cy41IDEzLjUtNCAxMmMtNS0yLjUuNS0xMSA2LTIiLz48L3N2Zz4=")
18
-
no-repeat;
19
-
background-size: 100% 100%;
20
-
background-color: transparent;
21
width: 1em;
22
height: 1em;
23
}
···
14
}
15
16
.i-lucide-line-squiggle {
17
+
--un-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5c5-2 7 2.5 3 4C1.5 10 2 15 5 16c5 2 9-10 14-7s.5 13.5-4 12c-5-2.5.5-11 6-2'/%3E%3C/svg%3E");
18
+
-webkit-mask: var(--un-icon) no-repeat;
19
+
mask: var(--un-icon) no-repeat;
20
+
-webkit-mask-size: 100% 100%;
21
+
mask-size: 100% 100%;
22
+
background-color: currentColor;
23
width: 1em;
24
height: 1em;
25
}