介绍

知名且开源的图标库有很多, 但是最好用的(个人认为)害得是 iconify

• iconify 官网文档
• iconify 图标预览

配合 tailwindcss 一起使用

创建项目 & 安装依赖

# 创建项目
pnpm create vite tailwindcss-demo --template vue

# 安装依赖
cd tailwindcss-demo && pnpm install

# 安装 tailwindcss 和 @tailwindcss/vite 插件
pnpm install tailwindcss @tailwindcss/vite

# 安装 iconify 图标库插件
pnpm i -D @iconify/tailwind4 @iconify/json

修改配置文件

vite.config.ts

// https://vite.dev/config/
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(), // tailwindcss plugin
  ],
});

src/style.css

@import "tailwindcss";
@plugin "@iconify/tailwind4";

修改 App.vue

<template>
  <h1 class="text-3xl text-red-500 underline flex items-center">
    <span class="icon-[mdi-light--home]"></span>
    <span> Hello world! </span>
  </h1>
</template>

<script setup></script>

<style scoped></style>