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>