IdbI

第13章—组件实战：Icon图标组件

Icon 图标组件是非常常用的组件。

它用起来非常简单，只要复制图标的组件名，直接渲染即可：

它也有一些 props：

spin 是让图标不断转圈：

rotate 是指定图标旋转角度：

antd 内置了很多图标组件，如果觉得不够用，还可以自己扩展：

import React from 'react';
import Icon from '@ant-design/icons';
import type { GetProps } from 'antd';

type CustomIconComponentProps = GetProps<typeof Icon>;

const HeartSvg = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />
  </svg>
);

const HeartIcon = (props: Partial<CustomIconComponentProps>) => <Icon component={HeartSvg} {...props} />;

const App: React.FC = () => <HeartIcon style={{ color: 'pink' }} />;

export default App;

只要对 Icon 组件包一层，component 参数传入图标的 svg，那就是一个新的图标组件。

而且如果你的项目用了 iconfont，你也可以把 iconfont 图标封装成 Icon 组件：

import React from 'react';
import { createFromIconfontCN } from '@ant-design/icons';
import { Space } from 'antd';

const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});

const App: React.FC = () => (
  <Space>
    <IconFont type="icon-tuichu" />
    <IconFont type="icon-facebook" />
    <IconFont type="icon-twitter" />
  </Space>
);

export default App;

用 createFromIconfontCN 的方法，传入 scriptUrl，就可以直接用 IconFont 的组建了。

Icon 组件就这么多用法，还是挺简单的。

接下来我们自己实现一下：

npx create-react-app --template=typescript icon-component

用 cra 创建个项目。

添加 Icon/index.tsx

import React, { PropsWithChildren, forwardRef } from 'react';

type BaseIconProps = {
    className?: string;
    style?: React.CSSProperties;
    size?: string | string[];
    spin?: boolean;
};

export type IconProps = BaseIconProps & Omit<React.SVGAttributes<SVGElement>, keyof BaseIconProps>;

export const Icon = forwardRef<SVGSVGElement, PropsWithChildren<IconProps>>((props, ref) => {
    
    const { 
        style,
        className, 
        spin, 
        size = '1em',
        children,
        ...rest 
    } = props;

    return (
        <svg ref={ref} style={style} fill="currentColor" {...rest}>
            {children}
        </svg>
    );
});

这里有 style、className、spin、size、children 这些参数，都很好理解。

此外，因为 Icon 就是对 svg 的封装，所以我们也接受所有 svg 的属性，透传给内部的 svg。

这里还用了 forwardRef 来把 svg 的 ref 转发出去：

还有，size 默认为 1em 也就是用 font-size 的大小：

填充颜色用 currentColor，也就是 color 的值：

这就是为什么我们能通过 font-size 和 color 来修改 Icon 组件的大小和颜色。

然后处理下 size 参数：

size 可以传 [10px, 10px] 分别指定宽高，也可以传 10px 来同时指定宽高，所以要做下处理。

import React, { PropsWithChildren, forwardRef } from 'react';

type BaseIconProps = {
    className?: string;
    style?: React.CSSProperties;
    size?: string | string[];
    spin?: boolean;
};

export type IconProps = BaseIconProps & Omit<React.SVGAttributes<SVGElement>, keyof BaseIconProps>;

export const getSize = (size: IconProps['size']) => {
    if (Array.isArray(size) && size.length === 2) {
        return size as string[];
    }

    const width = (size as string) || '1em';
    const height = (size as string) || '1em';

    return [width, height];
};

export const Icon = forwardRef<SVGSVGElement, PropsWithChildren<IconProps>>((props, ref) => {
    
    const { 
        style,
        className, 
        spin, 
        size = '1em',
        children,
        ...rest 
    } = props;

    const [width, height] = getSize(size);

    return (
        <svg ref={ref} style={style} width={width} height={height} fill="currentColor" {...rest}>
            {children}
        </svg>
    );
});

然后再处理下 className。

安装用到的包：

npm install --save classnames


const cn = cs(
    'icon',
    {
        'icon-spin': spin
    },
    className
)

实现下 icon-spin 的样式：

安装 sass 包：

npm install --save-dev sass

添加 Icon/index.scss

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.icon {
  display: inline-block;
}

.icon-spin {
  animation: spin 1s linear infinite;
}

icon 设置为 inline-block，也就是行内元素但是可以设置宽高。

icon-spin 执行无限旋转动画。

在 Icon/index.tsx 里引入：

至此，Icon 组件就封装完了。

这就完了么？

没错，Icon 组件就这么简单。

然后创建 Icon/createIcon.tsx

import React, { forwardRef } from 'react';
import { Icon, IconProps } from '.';

interface CreateIconOptions {
  content: React.ReactNode;
  iconProps?: IconProps;
  viewBox?: string;
}

export function createIcon(options: CreateIconOptions) {
  const { content, iconProps = {}, viewBox = '0 0 1024 1024' } = options;

  return forwardRef<SVGSVGElement, IconProps>((props, ref) => {
    return <Icon ref={ref} viewBox={viewBox} {...iconProps} {...props}>
      {content}
    </Icon>
  });
}

它是用来创建 Icon 组件的，接收 svg 的内容，也可以设置一些 IconProps、fill 颜色等。

接下来用它创建几个 Icon 组件试试：

Icon/icons/IconAdd.tsx

import { createIcon } from '../createIcon';

export const IconAdd = createIcon({
  content: (
    <>
      <path d="M853.333333 480H544V170.666667c0-17.066667-14.933333-32-32-32s-32 14.933333-32 32v309.333333H170.666667c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h309.333333V853.333333c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V544H853.333333c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32z"></path>
    </>
  ),
});

Icon/icons/IconEmail.tsx

import { createIcon } from '../createIcon';

export const IconEmail = createIcon({
  content: (
    <>
      <path d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"></path>
    </>
  ),
});

在 App.tsx 里引入下试试：

import { IconAdd } from './Icon/icons/IconAdd';
import { IconEmail } from './Icon/icons/IconEmail';

function App() {
  return (
    <div style={ {padding: '50px'} }>
      <IconAdd></IconAdd>
      <IconEmail></IconEmail>
    </div>
  );
}

export default App;

跑下开发服务：

npm run start

可以看到，Icon 渲染出来了：

然后试下 props：

import { IconAdd } from './Icon/icons/IconAdd';
import { IconEmail } from './Icon/icons/IconEmail';


function App() {
  return (
    <div style={ {padding: '50px'} }>
      <IconAdd size='40px'></IconAdd>
      <IconEmail spin></IconEmail>
      <IconEmail style={{color: 'blue', fontSize: '50px'}}></IconEmail>
    </div>
  );
}

export default App;

没啥问题。

接下来支持下 iconfont 的图标：

创建 Icon/createFrontIconfont.tsx

import React from 'react';
import { Icon, IconProps } from './';

const loadedSet = new Set<string>();

export function createFromIconfont(scriptUrl: string) {
  if (
    typeof scriptUrl === 'string'
    && scriptUrl.length
    && !loadedSet.has(scriptUrl)
  ) {
    const script = document.createElement('script');
    script.setAttribute('src', scriptUrl);
    script.setAttribute('data-namespace', scriptUrl);
    document.body.appendChild(script);

    loadedSet.add(scriptUrl);
  }

  const Iconfont = React.forwardRef<SVGSVGElement, IconProps>((props, ref) => {
    const { type, ...rest } = props;

    return (
      <Icon {...rest} ref={ref}>
        { type ? <use xlinkHref={`#${type}`} /> : null}
      </Icon>
    );
  });

  return Iconfont;
}

createFromIconfont 会传入 scriptUrl，我们在 document.body 上添加 <script> 标签引入它。

当然，如果加载过的就不用再次加载了，所以用 Set 来记录下。

然后用的时候使用 <use xlinkHref="#type" > 引用。

antd 的就是这么做的：

我们测试下：

登录 iconfont.cn

选几个图标:

添加到购物车，创建个项目：

然后就可以看到在线 js 链接：

我们在项目里引入下试试：

import { createFromIconfont } from './Icon/createFrontIconfont';
import { IconAdd } from './Icon/icons/IconAdd';
import { IconEmail } from './Icon/icons/IconEmail';

const IconFont = createFromIconfont('//at.alicdn.com/t/c/font_4443338_a2wwqhorbk4.js');

function App() {
  return (
    <div>
      <div style={ {padding: '50px'} }>
        <IconFont type="icon-shouye-zhihui" size="40px"></IconFont>
        <IconFont type="icon-gerenzhongxin-zhihui" fill="blue" size="40px"></IconFont>
      </div>
    </div>
  );
}

export default App;

引入成功！

至此，我们的 Icon 组件就开发完成了。

案例代码上传了小册仓库。

总结

这节我们实现了 Icon 组件。

支持 size、spin、className、style 等参数。

然后实现了 createIcon 方法，可以传入 svg 内容来生成具体的 Icon。

并且对 iconfont 做了支持，实现了 createIconFromIconfont，可以传入 scriptUrl，然后指定 type 来引用对应的 icon。

通过把 svg 的 fill 设置为 currentColor，把 width、height 设置为 1em， 实现了可以通过 color 和 font-size 来设置 Icon 大小和颜色的效果。

这就是我们每天在用的 Icon 组件的实现原理。

返回上级