Icon组件封装携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情 >> 在i

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情 >>

在iconfont官网中，学习彩色图标的使用

基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
    
+    <script src="//at.alicdn.com/t/font_2861113_bizfx7i5efd.js"></script>
+    <style>
+      .icon {
+        width: 1em; height: 1em;
+        vertical-align: -0.15em;
+        fill: currentColor;
+        overflow: hidden;
+     }
+    </style>
  </head>
  <body>
+    <svg class="icon" aria-hidden="true">
+      <use xlink:href="#icon-car"></use>
+    </svg>

    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-a-huaban2fuben17"></use>
    </svg>
    

    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

操作

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

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

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

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

在任意组件中，使用图标

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

封装Icon组件

目标

能够封装 Icon 图片通用组件

封装组件的基本思路

定目标：给出测试用例。
```
<Icon className="someClass" type="iconbtn_like_sel" onClick={()=>{console.log('test')}}/>
```
明确每个属性的：作用，名字，格式，可选值，是否必须...
分析。分析如何去实现功能

react中直接通过props来接收就行
逐个实现功能

步骤

在 components 目录中，创建 Icon/index.tsx 文件
创建 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