Tailwind CSS 使用 Iconify 图标

1. 安装依赖

通过 npm 安装 tailwindcss，并创建 tailwind.config.js 文件。

npm install tailwindcss -D
npx tailwindcss init

安装 iconify 图标库和 TailwindCSS 插件。

npm install @iconify/json @iconify/tailwind -D

2. 配置插件

配置 tailwind.config.js 文件。

/** @type {import('tailwindcss').Config} */
const { addDynamicIconSelectors } = require('@iconify/tailwind')
export default {
  content: [
    './src/**/*.{vue,js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [addDynamicIconSelectors()],
}

3. 使用图标

<span class="icon-[svg-spinners--12-dots-scale-rotate]"></span>

4. 相关链接

tailwindcss官方文档
iconify官方文档
iconify图标库