图标

安装

npm install @cypress-design/react-icon

或者用纱线

yarn add @cypress-design/react-icon

使用量

import Icon from '@cypress-design/react-icon'

使用图标组件的简单方式

import Icon from '@cypress-design/react-icon'

export const MyButtonWithIcon = () => {
  return (
    <button className="border-1 flex items-center gap-[8px] border-red-500 p-[8px]">
      <Icon
        name="object-book"
        size="16"
        strokeColor="blue-600"
        fillColor="red-200"
        className="bg-red-100"
      />
      Read
    </button>
  )
}

我们还可以分别导入每个图标组件. 当我们使用被命名的进口品时,结果就会变得可树可摇(更优化). 这意味着最终捆绑将不会包含任何未使用的图标代码. 只有导入的图标最终会出现在您的应用程序或网站js中.

import { IconObjectBook } from '@cypress-design/react-icon'

export const MyButtonWithIcon = () => {
  return (
    <IconObjectBook size="16" strokeColor="indigo-600" fillColor="red-200" />
  )
}

如果您需要更改图标的颜色 hover 或者说 focus 前缀这些字的道具.

在这里 strokeColor 将改变在徘徊 从indigo到玉

import { IconObjectBook } from '@cypress-design/react-icon'

export const MyButtonWithIcon = () => {
  return (
    <button>
      <IconObjectBook
        size="16"
        strokeColor="indigo-600"
        hoverStrokeColor="jade-600"
      />
    </button>
  )
}

如果你需要的话 hover 或者说 focus 要被触发到父组的效应, 使用 interactiveColorsOnGroup。 。 。 . 此道具会更改所有伪前缀为分组焦点而不是由图标本身所触发.

为了实现同样的目标,在WindiCSS中,我们将利用 group-hover: 改为 hover:。 。 。 .

import { IconObjectBook } from '@cypress-design/react-icon'

export const MyButtonWithIcon = () => {
  return (
    <button className="group flex items-center gap-[8px] hover:text-jade-800">
      <IconObjectBook
        size="48"
        strokeColor="indigo-600"
        hoverStrokeColor="jade-600"
        interactiveColorsOnGroup
      />
      Book
    </button>
  )
}