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;1 collapsed line
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 图标的方式了。