使用 mask 实现丰富的图标形态

前言

通常前端项目中，引用图标资源有 2 种方式：

1. font-class(或 unicode) - 基于 CSS font-face
2. symbol 引用 - 基于 svg

然后就可以通过改变字体样式的方式调整图标的颜色、大小等。

这两种方式都有一定的前置准备工作，如通过 iconfont 打包好所有的图标资源到一个文件中，再在项目里引入，如果后期新增了图标，还需要重新打包、引入，稍显麻烦。

设计同学切了一张基本的灰色图标给到前端，但是页面上有红色、有渐变的图标应用场景，这个时候可以伸手再问设计要新的切图 🥺，但你也可以自力更生 💪！

下面介绍一种方式，只需一张 PNG 图标，完全通过 CSS 实现多色图标、渐变色图标、具有呼吸动态效果的图标等等！

实现多色图标

import './styles.scss'

export default function App() {
  return (
    <main id="app">
      <section>
        <span>原图</span>
        <img width="200" src="https://qn.lccl.cc/fill_circle.png" />
      </section>
      <section>
        <span>粉色背景+没有遮罩</span>
        <span class="pink" />
      </section>
      <section>
        <span>粉色背景+有遮罩</span>
        <span class="pink masked" />
      </section>
    </main>
  )
}

这里用到的关键 CSS 属性: mask。该属性允许使用者通过遮罩、或者裁切特定区域的图片的方式来隐藏一个元素的部分区域。

为元素设置一个背景色，如果不加遮罩显示出来的就是一个色块；加上遮罩，这个色块还存在，但是图层置底了，具体色块的哪部分能显示出来，由使用的遮罩决定。

示例中通过 mask: url() 加载了一张 PNG 图片作为遮罩，PNG 图片透明部分，表示这部分下面的粉色不需要显示，同理，PNG 图片有色部分，表示下面的图层区域的粉色需要显示出来。

如果需要其他颜色的图标，只需要改 background-color 即可。

使用遮罩最重要的是一种反向思维：需要显示的颜色——即前景色，作为背景色，然后盖上遮罩，最终展示出来的图案轮廓便是遮罩有色部分的图案轮廓，展示出来的图案的颜色是前面设置的背景色（在此刻蜕变成前景色）。

实现渐变色图标

因为 CSS 中 background 还可以设为渐变图案，可借此实现渐变色图标。

import { useState } from 'react'
import './styles.scss'

export default function App() {
  const [value, setValue] = useState(0.5)

  function onClick() {
    setValue(Math.random())
  }

  return <div className="stars" style={{ '--value': value }} onClick={onClick} />
}

实现呼吸动效图标

background 有多强大，你的图标就能多生动。

import './styles.scss'

export default function App() {
  return <div className="heart" />
}

兼容性

兼容性还是不错的，放心去生产环境里用！

其他

• mask: url() 引用的图片资源有同源策略的限制
• 书写 CSS 时，加上 -webkit-
• 除了 PNG 图片，SVG 也是可以作为遮罩的
• 可通过 mask-size 设置图标大小

总结

mask 让前端开发者获得了一种能力，可以像引入静态资源图片一样灵活的引入图标，并通过 CSS background 丰富的属性，让图标更加生动、页面更加有趣活泼。