import { Icon } from "@chakra-ui/react"
import { HiHeart } from "react-icons/hi"
export const IconBasic = () => (
<Icon size="lg" color="pink.700">
<HiHeart />
</Icon>
)
用法
¥Usage
import { Icon } from "@chakra-ui/react"<Icon />warning
Chakra 不提供任何开箱即用的图标。使用流行的图标库，例如 react-icons 或 lucide-react
¥Chakra doesn't provide any icons out of the box. Use popular icon libraries like react-icons or lucide-react
示例
¥Examples
React 图标
¥React Icons
与流行的 React 图标库（如 react-icons）集成
¥Integrate with popular react icon libraries like react-icons
import { Icon } from "@chakra-ui/react"
import { Md3dRotation } from "react-icons/md"
export const IconWithReactIcon = () => (
<Icon size="lg" color="tomato">
<Md3dRotation />
</Icon>
)
自定义 SVG
¥Custom svg
使用 asChild 属性在 Icon 组件中渲染自定义 SVG 图标。
¥Use the asChild prop to render custom svg icons within the Icon component
import { Icon } from "@chakra-ui/react"
const Demo = () => {
return (
<Icon size="lg" color="red.500">
<svg viewBox="0 0 32 32">
<g fill="currentColor">
<path d="M16,11.5a3,3,0,1,0-3-3A3,3,0,0,0,16,11.5Z" />
<path d="M16.868.044A8.579,8.579,0,0,0,16,0a15.99,15.99,0,0,0-.868,31.956A8.579,8.579,0,0,0,16,32,15.99,15.99,0,0,0,16.868.044ZM16,26.5a3,3,0,1,1,3-3A3,3,0,0,1,16,26.5ZM16,15A8.483,8.483,0,0,0,8.788,27.977,13.986,13.986,0,0,1,16,2a6.5,6.5,0,0,1,0,13Z" />
</g>
</svg>
</Icon>
)
}
创建图标
¥Create Icon
使用 createIcon 实用程序创建自定义图标
¥Use the createIcon utility to create custom icons
"use client"
import { createIcon } from "@chakra-ui/react"
const HeartIcon = createIcon({
displayName: "HeartIcon",
path: (
<>
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
fill="currentColor"
d="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
/>
</>
),
})
const Demo = () => {
return <HeartIcon size="lg" color="blue.400" />
}