图标

说明

项目图标使用 Iconify，提供 150+ 套图标集，有 200,000+ 个图标可以免费使用。

使用图标

你可以在 Iconify 上搜索需要的图标，然后按照以下方式在项目中使用：

import { Icon } from '@/components/icon'

export default function IconExample () {
  return (
    <>
      {/* icon 参数传入搜索到的图标名 */}
      <Icon icon="icon-park-outline:user" />

      {/* 设置图标大小 */}
      <Icon icon="icon-park-outline:user" width="24" height="24" />
    
      {/* 使用 CSS 单位  */}
      <Icon icon="icon-park-outline:user" width="1.5rem" />
    
      {/* 只设置一个尺寸，保持宽高比  */}
      <Icon icon="icon-park-outline:user" height="2em" />
    
      {/* 设置图标颜色  */}
      <Icon icon="icon-park-outline:user" color="red" />
      
      {/* 旋转和翻转  */}
      <Icon icon="mdi:arrow-right" rotate={90} />
      <Icon icon="mdi:arrow-right" flip="horizontal" />
      
      {/* 使用 CSS 类  */}
      <Icon icon="icon-park-outline:user" className="my-icon" />
    </>
  )
}

创建动画图标

import { Icon } from '@/components/icon'
import styles from './AnimatedIcon.module.css'

export default function AnimatedIcon () {
  return (
    <Icon icon="icon-park-outline:loading" className={styles.spinIcon} />
  )
}

/* AnimatedIcon.module.css */
.spinIcon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

图标加载方式

图标默认通过网络请求进行加载，如果你想要增强用户体验，让图标在页面加载完就立即显示，或在内网环境中使用，可以将部分图标进行预加载，以 icon-park-outline 这套图标为例：

pnpm add @iconify-json/icon-park-outline

在 src/plugins/iconify.ts 中进行添加：

import iconParkOutline from '@iconify-json/icon-park-outline/icons.json'
import { addCollection } from '@iconify/react'

export function setupIconifyOffline() {
  // 预加载图标
  addCollection(iconParkOutline)
}

本项目已默认将 icon-park-outline 预加载。

加载方式对比

加载方式	优点	缺点	推荐场景
网络加载	按需加载，不增加项目体积	首次加载需请求 API	图标种类多且分散
预加载	立即显示，无需额外请求	增加项目体积	关键 UI 图标、离线应用

本地 svg 图标

将 svg 文件直接存放在 src/assets/svg-icon 中，即可直接使用图标。

src/assets/svg-icon
└── logo.svg

使用方式：

import { Icon } from '@/components/icon'

export default function LocalIcon () {
  
  return (
    {/* icon 名称为 icon-local:文件名  */}
    <Icon icon="icon-local:logo" />
  )
}