我的样式和图标解决方案浅解

图标是 web 应用中常见的视觉元素之一，一直以来我都在寻找合适自己的图标解决方案，今天来介绍一下我最常用的一个方案：tailwindcss + icon plugin !

Tailwindcss

如果你已经很熟悉tailwindcss ，可以跳过 😂

在图标之前，先介绍一下tailwindcss: [Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.](https://tailwindcss.com/)

使用这个工具，开发者只需要写某些类名即可，每一个类名都会在构建时编译到最终的样式表中。

这就意味着我们可以在整个项目中随处写类名，最后只会有一个类名及其样式存在于打包的样式表中。

看看下面这个例子：

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">
        Sarah Dayan
      </div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

你可以通过类名写几乎所有样式，tailwindcss 支持良好的媒体查询功能和主题和自定义样式。

最重要的是 tailwindcss 具有良好的插件系统和生态，官方的功能对动画的支持比较薄弱，但是在社区里存在[Tailwind CSS Animated](https://www.tailwindcss-animated.com/) 这样的插件，我们可以比较方便的用来写基础的动画。

只要对组件进行良好的拆分，其实最终的类名也不会太长，况且我们还可以组合预处理器来使用。

如果你需要更好的动画，则可以使用专业的动画库来实现相应的需求，例如：

• [Documentation | Framer for Developers](https://www.framer.com/motion/)
• [GSAP | GSAP | Docs & Learning](https://gsap.com/docs/v3/GSAP/)
• [anime.js • JavaScript animation engine](https://animejs.com/)
• [react-spring](https://www.react-spring.dev/)
• [Three.js – JavaScript 3D Library](https://threejs.org/)（杀手级）

每一个动画库都非常强大，或许选择其中一个进行深度使用就好。

Icon

我们可以使用tailwindcss 的插件 [iconify/plugins/tailwind at main · iconify/iconify](https://github.com/iconify/iconify/tree/main/plugins/tailwind) 和 [Icônes](https://icones.js.org/) 配合解决图标需求。

在按官方文档安装好插件之后，直接在 [Icônes](https://icones.js.org/) 上搜索关键词就好。

在之前，我长期使用[React Icons](https://react-icons.github.io/react-icons/)作为图标解决方案，上面的图标种类非常齐全（仅部分截图）：

而在我切换到Vue 技术栈之后，就无法再用这一个库了，机缘巧合下找到了[Icônes](https://icones.js.org/)，这个站点是托尼老师开发的，资源非常丰富（部分截图）：

相比之前的库，这里有更多的资源，包括一些我很喜欢的动画图标。

[UseAnimations – React micro-animations library](https://react.useanimations.com/) 少量的动画图标推荐

话说回来，使用[Icônes](https://icones.js.org/)再配合上作者开发的[Iconify IntelliSense - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)插件，我们可以在vscode 里直接预览图标的效果，举个例子：

最后，使用tailwindcss + icon 插件 已经能满足我大多数关于样式和图标的需求。

在一些特殊的样式需求下，我还是可以用预处理器去写样式。在一些特殊的图标动画需求下，我们也可以使用专业的动画库，甚至是 Lottie 来实现动画效果（[LottieFiles: Download Free lightweight animations for website & apps.](https://lottiefiles.com/)）

相较于gif 方案，后者体积可以变得非常小，也提供了很多控制机制来满足用户的交互需求。