从零开始搭建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>
);
相关推荐
lapiii35822 分钟前
快速学完React计划(第一天)
前端·react.js·前端框架
liangshanbo121522 分钟前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript
LRH2 小时前
时间切片 + 双工作循环 + 优先级模型:React 的并发任务管理策略
前端·react.js
歪歪1002 小时前
React Native开发有哪些优势和劣势?
服务器·前端·javascript·react native·react.js·前端框架
XiaoSong2 小时前
React Native 主题配置终极指南,一篇文章说透
前端·react native·react.js
im_AMBER16 小时前
React 01
前端·javascript·笔记·react.js·前端框架·web
@大迁世界16 小时前
React 19.2.0 有哪些新变化
前端·javascript·react.js·前端框架·ecmascript
吃饺子不吃馅19 小时前
【八股汇总,背就完事】这一次再也不怕webpack面试了
前端·面试·webpack
duandashuaige20 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
今天头发还在吗20 小时前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design