Libon

在纯 CSS 中展示图标

2Mins #CSS
UNOCSS 是如何通过纯 CSS 来展示单色/多色图标的?

ToC

其实在谈到图标这个话题的时候,我就会想起以前使用图标的方式,它们有 iconfont svg img这几种,后来在网上冲浪的时候,认识到了antfu 大佬以及他的作品:unocss,它是一个原子 CSS 框架,但它有一个预设,可以用来支持设置 CSS 图标,原理就是 mask 属性。原文链接

图标分为单色和多色,而图标的来源则使用的 iconify

1
.i-carbon\:3d-print-mesh {
2
--un-icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 32 32'%3E%3Cpath d='M29.976 15.783l-2-9a1 1 0 0 0-.421-.615l-6-4A1 1 0 0 0 21 2H11a1 1 0 0 0-.555.168l-6 4a1 1 0 0 0-.421.615l-2 9a1.002 1.002 0 0 0 .018.504l3 10a1 1 0 0 0 .67.671l10 3h.006a.979.979 0 0 0 .564 0h.005l10-3a1 1 0 0 0 .671-.67l3-10a1.002 1.002 0 0 0 .018-.505zm-19.05.833l-3.91-7.819l7.282 2.648zM16 12.497L19.589 18H12.41zM19.382 20L16 26.764L12.618 20zm-1.68-8.555l7.281-2.648l-3.91 7.82zm.488-2.305l3.096-4.747l3.515 2.343zM16 8.836L12.846 4h6.308zm-2.19.304L7.2 6.736l3.514-2.343zm-4.844 8.03l-4.802-1.801l1.201-5.402zm5.104 10.207l-6.502-1.95l3.128-4.798zm7.233-6.748l3.129 4.797l-6.502 1.951zm5.332-10.662l1.2 5.402l-4.802 1.8zM4.537 17.645l4.595 1.722l-2.793 4.283zm21.124 6.005l-2.793-4.283l4.595-1.722z' fill='currentColor'/%3E%3C/svg%3E");
3
background-color: currentColor;
4
height: 1em;
5
mask: var(--un-icon) no-repeat;
6
mask-size: 100% 100%;
7
-webkit-mask: var(--un-icon) no-repeat;
8
-webkit-mask-size: 100% 100%;
9
width: 1em;
10
}
1
.i-twemoji\:ab-button-blood-type {
2
background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 36 36'%3E%3Cpath fill='%23DD2E44' d='M36 32a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4h28a4 4 0 0 1 4 4v28z'/%3E%3Cpath fill='%23FFF' d='M7.15 10.072c.476-1.288 1.567-2.324 2.996-2.324c1.483 0 2.52.979 2.996 2.324l5.488 15.231c.168.448.224.84.224 1.036c0 1.092-.896 1.848-1.932 1.848c-1.177 0-1.765-.616-2.044-1.456L14 24H6.28l-.866 2.703c-.28.868-.868 1.484-2.016 1.484c-1.12 0-2.072-.84-2.072-1.96c0-.448.14-.784.196-.924L7.15 10.072zm.308 10.163h5.32l-2.604-8.119h-.056l-2.66 8.119zM20 10.1c0-1.344.924-2.1 2.212-2.1h5.376c2.912 0 5.265 1.96 5.265 4.928c0 1.96-.812 3.276-2.605 4.116v.056c2.38.336 4.256 2.424 4.256 4.859c0 3.948-2.632 6.041-6.496 6.041H22.24c-1.288 0-2.24-.876-2.24-2.192V10.1zm4.2 5.9h2.184c1.372 0 2.268-.815 2.268-2.216c0-1.315-1.036-2.088-2.268-2.088H24.2V16zm0 8h3.304c1.513 0 2.632-.729 2.632-2.296c0-1.315-1.008-2.112-2.968-2.112H24.2V24z'/%3E%3C/svg%3E") no-repeat;
3
background-color: transparent;
4
background-size: 100% 100%;
5
height: 1em;
6
width: 1em;
7
}

多色图标因为需要保持其原有的色彩,所以并没有使用到 mask 属性,这个不重要,重点是单色图标中的 mask mask-size 属性。mask 属性则是 CSS 中的一个遮罩属性,它以一种蒙版的形式遮住不想要的内容,使用方式与设置背景图的方式一致,以后又多了一种使用 CSS 图标的方式了。


CD ..