用storybook开发一个自己的图标库继续【可复制图标代码，可搜索，可切换图标类型】

效果：

 

 

需求：显示所有的图标（现在是我写的mock数据），可以切换图标类型，可以进行关键词搜索

 

代码：

import React from 'react';
import copy from 'copy-to-clipboard';
import SvgOaIconAddressDefault from '../assets/OaIconAddressDefault';
// import { SvgIcon, SvgIconProps } from '@vvwork/atoms';

const Add = () => {
  // mock list
  const list = [
    {
      name: 'SvgOaIconAddressDefault1',
      component: <SvgOaIconAddressDefault />,
      type: 'Filled',
    },
    {
      name: 'SvgOaIconAddressDefault2',
      component: <SvgOaIconAddressDefault />,
      type: 'Filled',
    },
    {
      name: 'SvgOaIconAddressDefault3',
      component: <SvgOaIconAddressDefault />,
      type: 'Filled',
    },
    {
      name: 'SvgOaIconAddressDefault4',
      component: <SvgOaIconAddressDefault />,
      type: 'Rounded',
    },
    {
      name: 'SvgOaIconAddressDefault5',
      component: <SvgOaIconAddressDefault />,
      type: 'Rounded',
    },
    {
      name: 'SvgOaIconAddressDefault6',
      component: <SvgOaIconAddressDefault />,
      type: 'TwoTone',
    },
    {
      name: 'SvgOaIconAddressDefault7',
      component: <SvgOaIconAddressDefault />,
      type: 'TwoTone',
    },

    {
      name: 'SvgOaIconAddressDefault8',
      component: <SvgOaIconAddressDefault />,
      type: 'Sharp',
    },
    {
      name: 'SvgOaIconAddressDefault9',
      component: <SvgOaIconAddressDefault />,
      type: 'Sharp',
    },
    {
      name: 'SvgOaIconAddressDefault11',
      component: <SvgOaIconAddressDefault />,
      type: 'Outlined',
    },
    {
      name: 'SvgOaIconAddressDefault12',
      component: <SvgOaIconAddressDefault />,
      type: 'Outlined',
    },
    {
      name: 'SvgOaIconAddressDefault13',
      component: <SvgOaIconAddressDefault />,
      type: 'Sharp',
    },
  ];
  const iconType = [
    { title: '所有类型', type: '' },
    { title: '填充型【Filled】', type: 'Filled' },
    { title: '线型【Outlined】', type: 'Outlined' },
    { title: '圆角型【Rounded】', type: 'Rounded' },
    { title: '尖角型【Sharp】', type: 'Sharp' },
    { title: '双色调型【Two tone】', type: 'TwoTone' },
  ];
  // 监听鼠标移入移出
  const [hover, setHover] = React.useState(false);
  const [hoverItem, setHoverItem] = React.useState(-1);
  // 监听选择的图标类型
  const [type, setType] = React.useState('');
  // 监听搜索想要的图标
  // const [search, setSearch] = React.useState('');

  // 显示的图标
  const [iconList, setIconList] = React.useState(list || []);

  // 切换鼠标移入移出效果
  const toggleHover = (index: number) => {
    setHoverItem(index);
    setHover(!hover);
  };
  // 点击复制代码
  const handleCopy = (name: string) => {
    const copyContent = `import ${name} from '../assets/${name}';`;
    copy(copyContent);
  };
  // 点击切换图标类型,显示对应数据
  const handleChangeType = (type: string) => {
    setType(type);
    if (type === '') {
      setIconList(list);
    } else {
      setIconList(list.filter(item => item.type === type));
    }
  };
  // 触发关键词搜索
  const handleSearch = (value: string) => {
    setIconList(list.filter(item => item.name.indexOf(value) !== -1));
  };

  return (
    <div>
      <h2>图标库</h2>
      <div style={{ margin: '16px 0' }}>
        <span>搜索您想要的图标: </span>
        <input
          type="text"
          onChange={e => {
            handleSearch(e.target.value);
          }}
        />
      </div>
      <div>
        <span>图标分类: </span>
        {iconType &&
          iconType.map(item => (
            <button
              key={item.type}
              onClick={() => {
                handleChangeType(item.type);
              }}
              style={{
                margin: '8px',
                padding: '4px 8px',
                cursor: 'pointer',
                background: type === item.type ? '#1EA7FD' : '#fff',
              }}
            >
              {item.title}
            </button>
          ))}
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', margin: '16px 0' }}>
        {iconList &&
          iconList.map((item, index) => (
            <div
              key={item.name}
              onClick={() => {
                handleCopy(item.name);
              }}
              style={{
                width: '220px',
                textAlign: 'center',
                margin: '8px',
                padding: '16px',
                border: '1px solid #eee',
                boxShadow: hover && hoverItem === index ? '5px 5px 10px #eee' : 'none',
                cursor: 'pointer',
                animation: '0.4s linear',
              }}
              onMouseEnter={() => {
                toggleHover(index);
              }}
              onMouseLeave={() => {
                toggleHover(index);
              }}
              title="点击复制代码"
            >
              {item.component}
              <p>{item.name}</p>
            </div>
          ))}
      </div>
    </div>
  );
};
export default Add;

　　

README.md的内容:

# 图标

Web IM 图标库

## 图标分类

| Name     | Type        | Description |
| :------- | :---------- | :---------- |
| Filled   | components  | 填充型      |
| Outlined | components  | 线型        |
| Rounded  | components  | 圆角型      |
| Sharp    | [components | 尖角型      |
| Two tone | components  | 双色调型    |

### 基础 API

左键点击图标可以复制引入代码

例如:

`import SvgOaIconAddressDefault from '../assets/SvgOaIconAddressDefault';`

使用:

`<SvgOaIconAddressDefault />`