@nutui/icons-react

京东风格 SVG 图标库 · React 版本

安装

npm install @nutui/icons-react
# 或
pnpm add @nutui/icons-react

前置依赖（peerDependencies）

react >= 17.0.0
react-dom >= 17.0.0

使用

按需引入（推荐）

ESM 模式下，打包工具（Vite / Webpack 5 / Rollup）会自动 tree-shaking，只打包实际用到的图标。

import { Add, ArrowRight, Close } from '@nutui/icons-react'

export default function App() {
  return (
    <>
      <Add width={24} height={24} color="#f00" />
      <ArrowRight />
      <Close onClick={() => console.log('close')} />
    </>
  )
}

引入样式

import '@nutui/icons-react/dist/style_icon.css'

图标属性

| 属性 | 类型 | 默认值 | 说明 | |---|---|---|---| | width | string \| number | — | 宽度，数字自动补 px | | height | string \| number | — | 高度，数字自动补 px | | color | string | — | 图标颜色，默认继承 currentColor | | className | string | '' | 自定义 class | | style | CSSProperties | — | 自定义样式 | | onClick | (e: MouseEvent) => void | — | 点击事件 |

全局配置

使用 configure 设置图标的 class 前缀：

import { configure } from '@nutui/icons-react'

configure({
  classPrefix: 'my-icon', // 默认 'nut-icon'
})

UMD / CDN 引入

UMD 产物为全量 bundle，不支持 tree-shaking，仅适用于 <script> 标签直接引入的场景。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/icons-react/dist/style_icon.css">
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@nutui/icons-react/dist/lib/index.umd.js"></script>

开源协议

MIT License