Hi, 大家好！我是程序员库里。
今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。
在接下来的日子，我会持续分享前端反卷计划中的每个知识点。
以下是前端反卷计划的内容：
目前这些内容持续更新到了我的 学习文档 中。感兴趣的欢迎一起学习！
1.安装fortawesome
icon组件的开发借助第三方开源库：fortawesome
1.安装fortawesome第三方库
npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save2.新建Icon目录
2.新建Icon目录，同其他组件
3.定义props
3.定义主题的props和icon的props
import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
export type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' |
'danger' | 'light' | 'dark';
export interface IconProps extends FontAwesomeIconProps {
theme?: ThemeProps;
className?: string;
}4.FontAwesomeIcon
import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';5.把icon的className和主题的变量对上
6.使用FontAwesomeIcon组件来渲染，将class和其他本身的props带上
7.开始给icon增加color，但是color太多，我们这里使用scss提供的循环功能
首先在src/styles/_variables.scss增加theme-color变量
$theme-colors: ( "primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark );然后使用each函数给icon不同的颜色赋值
@each $key, $val in $theme-colors { .icon-#{$key} { color: $val; } }最后在index.scss中增加icon
@import "../components/Icon/style";8.为了能使用icon的时候传入字符串，需要引入fontawesome的fas功能
import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' library.add(fas)9.整体代码：
import React from 'react';
import classnames from 'classnames';
import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)
export type ThemeProps = 'primary' | 'secondary' | 'success' | 'info' | 'warning' |
'danger' | 'light' | 'dark';
export interface IconProps extends FontAwesomeIconProps {
theme?: ThemeProps;
className?: string;
}
const Icon: React.FC<IconProps> = (props) => {
const { className, theme, ...restProps } = props;
// icon-primary
const classes = classnames('curry-icon', className, {
[`icon-${theme}`]: theme
})
return (
<FontAwesomeIcon className={classes} {...restProps} />
)
}
export default Icon;10.现在使用上面定义的icon组件，看下效果
<Icon icon='coffee' theme="danger" size="10x" />
将theme换成primary看下效果
系列篇
[前端反卷计划-组件库-04-Button组件开发]
[# 前端反卷计划-组件库-05-Menu组件开发]
持续更新
目前这些内容持续更新到了我的 学习文档 中。感兴趣的欢迎一起学习！
