dls-icons-react

安装

npm i -D dls-icons-react

使用

作为 React 组件

Demo →

import { IconArrowRight } from 'dls-icons-react'

export default function Title() {
  return (
    <div className="title">
      <h1>
        Hello Icons
        <IconArrowRight style={{ color: '#999', marginLeft: 5 }} />
      </h1>
    </div>
  )
}

Prop

spin: boolean

图标是否旋转。默认值为 false。可以使用 --dls-icon-spin-duration 自定义旋转一圈所需的时间。默认值为 1s。

active: boolean

图标是否处于激活状态。默认值为 undefined。如果 active 为 undefined，图标将处于默认状态。否则，根据 active 的值，它将处于激活或非激活状态。

Note 要让 active prop 正常工作，您应该在根组件中渲染一个 SharedResources 组件。例如：

import { SharedResources } from 'dls-icons-react'

export default function App() {
  return (
    <div className="app">
      <SharedResources />
      ...
    </div>
  )
}

作为图标数据

import { dataArrowRight } from 'dls-icons-react'

/*
{
  {
    name: 'icon-arrow-right',
    content: '<path d="..." ...',
    width: 24,
    height: 24
  }
}
*/
console.log(dataArrowRight)

可用图标