这是我参与「 第五届青训营 」伴学笔记创作活动的第 7 天

组件库：Icon组件的开发

一、基本功能

1、Icon组件是通用组件不可缺少的一个组件，它在开发中使用的频率是很高的

2、Icon组件的基本用法是传入一个url、name，使组件呈现出来，这个传入的来源可以是内置Icon、项目自定义的Icon、以及网络连接

3、需要有改变尺寸的功能，用户传入size属性，可以根据size绑定的值进行尺寸的修改，如果用户传入纯数字，则需要内部添加单位

4、改变字体图标的颜色color，如果用户使用的是字体图标，可以穿入color属性进行颜色的修改

5、fontIcon有大量svg图标 字体图标使用，在后续中可以将fontIcon上的部分有意思的图标封装成独立的Icon组件库提供给用户单独安装使用，由于时间成本比较大，这里只封装两个图标

二、类型定义

  props: {
    name: {
      type: String,
      default: ''
    },
    prefix: {
      type: String,
      default: 'icon'
    },
    size: {
      type: [String, Number] as PropType<string | number>,
      default: 'inherit'
    },
    color: {
      type: String,
      default: 'inherit'
    }
  },

三、功能实现

1、根据用户传入的size属性改变尺寸

// 获取尺寸 可能会变所以计算属性
const iconSize = computed(() =>
	typeof props.size === 'number' ? `${props.size}px` : props.size
)

2、用户传入远程链接，定义imgIcon

    // 远程
    const imgIcon = (
      <img
        src={props.name}
        style={{ width: iconSize.value, verticalAlign: 'middle' }}
      ></img>
    )

3、如果是字体图标，定义fontIcon

    // span
    const fontIcon = (
      <span
        class={[props.prefix, props.prefix + '-' + props.name]}
        style={{
          fontSize: iconSize.value,
          // 获取颜色
          color: props.color
        }}
      ></span>
    )

4、根据用户传入的name属性是否包含http或者https来选择给用户返回的icon组件，如果有http或者https，则返回imgIcon，表示远程图标，如果没有包涵，则返回fontIcon

const icon = /http|https/.test(props.name) ? imgIcon : fontIcon
return () => icon

5、内置图标组件，封装一个新组件（ArrowDownIcon）

interface IconProps {
  size?: number | string
}
export const ArrowDownIcon = (props: IconProps) => {
  const size = props.size
    ? typeof props.size === 'number'
      ? `${props.size}px`
      : props.size
    : undefined

  return (
    <svg width={size} height={size}></svg>
  )
}

• 用户直接使用

<ml-icon name="vuejs" size="30px" color="green"></ml-icon>
<arrow-down-icon :size="40"></arrow-down-icon>