从零开始搭建React+TypeScript+webpack开发环境-使用iconfont构建图标库

创建iconfont项目

进入iconfont官网,完成注册流程,即可创建项目。

无法访问iconfont可尝试将电脑dns改为阿里云镜像223.5.5.5和223.6.6.6

添加图标

在图标库里选择图标,加入购物车

将图标添加到之前创建的项目中

生成代码

将代码配置到项目里

复制代码

配置到webpack里

在网页模板里引用

开发图标组件

components文件夹下创建Icon组件

ts 复制代码
import React, { DetailedHTMLProps, HTMLAttributes } from 'react';

interface IconProps
  extends DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> {
  type: string;
}

const Icon: React.FC<IconProps> = ({ type, className, ...rest }) => (
  <i className={className} {...rest}>
    <svg className="zhique-icon" aria-hidden="true">
      <use xlinkHref={`#zhique-icon-${type}`} />
    </svg>
  </i>
);

export default Icon;

global.less里添加样式

less 复制代码
.zhique-icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentcolor;
    overflow: hidden;
  }

使用组件

ts 复制代码
import React from 'react';

import { Icon } from '@/components';

export default () => (
  <div>
    <Icon type="compass" />
  </div>
);
相关推荐
xiaopengbc3 小时前
在Webpack中,如何在不同环境中使用不同的API地址?
前端·webpack·node.js
li35744 小时前
React 核心 Hook 与冷门技巧:useReducer、useEffect、useRef 及 is 属性全解析
前端·javascript·react.js
hj5914_前端新手4 小时前
React 基础 - 状态管理
前端·react.js
烛阴4 小时前
【TS 设计模式完全指南】用适配器模式优雅地“兼容”一切
javascript·设计模式·typescript
叫我阿柒啊6 小时前
从Java全栈到前端框架的实战之路
java·数据库·微服务·typescript·前端框架·vue3·springboot
Spider_Man8 小时前
打造属于你的前端沙盒 🎉
前端·typescript·github
Cyann11 小时前
Day1- React基础组件使用
前端·react.js
霸气小男12 小时前
解决React中通过外部引入的css/scss/less文件更改antDesign中Modal组件内部的样式不生效问题
css·react.js
定栓12 小时前
Typescript入门-JSDoc注释及tsconfig讲解
前端·javascript·typescript
江城开朗的豌豆13 小时前
useEffect vs componentDidUpdate:谁才是真正的更新之王?
前端·javascript·react.js