Hi, 大家好!我是程序员库里。
今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。
在接下来的日子,我会持续分享前端反卷计划中的每个知识点。
以下是前端反卷计划的内容:
目前这些内容持续更新到了我的 学习文档 中。感兴趣的欢迎一起学习!
icon组件的开发借助第三方开源库:fortawesome
1.安装fortawesome第三方库
npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save
2.新建Icon目录,同其他组件
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;
}
import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
首先在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";
import { library } from '@fortawesome/fontawesome-svg-core' import { fas } from '@fortawesome/free-solid-svg-icons' library.add(fas)
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;
<Icon icon='coffee' theme="danger" size="10x" />
将theme换成primary看下效果
目前这些内容持续更新到了我的 学习文档 中。感兴趣的欢迎一起学习!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。