Skip to main content

Icon

ykui 提供了一套常用的图标集合，可直接使用。

基本用法​

使用 icon 属性选择展示的图标。

function App() {
  return (
    <div className="ykui-demo-row">
      <Icon icon="icon-423" />
      <Icon icon="icon-420" />
      <Icon icon="icon-421" />
    </div>
  );
}

不同尺寸​

提供 size 属性自定义图标大小。

function App() {
  return (
    <div className="ykui-demo-row">
      <Icon icon="icon-420" size={16} />
      <Icon icon="icon-420" size={24} />
      <Icon icon="icon-420" size={32} />
    </div>
  );
}

不同颜色​

提供 color 属性自定义图标大小。

function App() {
  return (
    <div className="ykui-demo-row">
      <Icon icon="icon-420" color="#8A88FF" />
      <Icon icon="icon-420" color="rgb(58, 54, 255)" />
      <Icon icon="icon-420" color="hsl(211, 100%, 61%)" />
    </div>
  );
}

全部图标​

API​

属性说明类型默认值
className类名string--
style样式CSSProperties--
icon图标名字string--
color图标颜色string--
size图标尺寸number--
onClick点击事件() => void--