项目中字体图标的使用及封装

字体图标

目标

能够在项目中使用字体图标

思路

在iconfont

彩色图标的使用： www.iconfont.cn/help/detail…

操作

0. 在 public 下 index.html 中引入该文件

<!-- 字体图标地址： -->
<script src="//at.alicdn.com/t/font_2503709_f4q9dl3hktl.js"></script>

2. 在 index.scss 中添加通过 css 代码

.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

3. 在组件中，使用

<svg className="icon" aria-hidden="true">
  {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
  <use xlinkHref="#iconbtn_like_sel"></use>
</svg>
​
​
<svg className="icon" aria-hidden="true">
  {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
  <use xlinkHref="#xxxxxxxx"></use>
</svg>
​
​
<svg className="icon" aria-hidden="true">
  {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
  <use xlinkHref="#yyyyyyyy"></use>
</svg>

封装Icon组件

目标

能够封装 Icon 图片通用组件

思路

0. 定目标：给出测试用例。

   <Icon className="someClass" type="iconbtn_like_sel" onClick={()=>{console.log('test')}}/>
   

   明确每个属性的：作用，名字，格式，可选值，是否必须...

1. 分析

   react中直接通过props来接收就行

2. 逐个实现功能

步骤

0. 在 components 目录中，创建 Icon/index.tsx 文件
1. 创建 Icon 组件，并指定 props 类型

核心代码

components/Icon/index.tsx 中：

// 组件 props 的类型
type Props = {
  // icon 的类型
  type: string
  // icon 的自定义样式
  className?: string
  // 点击事件
  onClick?: () => void
}
​
const Icon = ({ type, className, onClick }: Props) => {
  return (
    <svg
      className={'icon ' + className}
      aria-hidden="true"
      onClick={onClick}
    >
      <use xlinkHref={`#${type}`}></use>
    </svg>
  )
}
​
export default Icon

小结

封装组件的思路：测试驱动开发

\