我想引用apple这个图标,发现前缀是fab,我在library添加fab也显示,这个怎么解决呢?

来源:7-2 他山之石 - Icon组件编码第一部分

慕无忌9137154

2020-05-20

我想引用apple这个图标,发现前缀是fab,我在library添加fab也不显示,这个怎么解决呢?
我已经引用了 @fortawesome/free-brands-svg-icons

import { fas } from ‘@fortawesome/free-solid-svg-icons’;
import { fab } from ‘@fortawesome/free-brands-svg-icons’;

library.add(fas,fab);

这样也不行,求解

刚才发现这样写可以:
<Icon icon={[‘fas’, ‘check-square’]} />
<Icon icon={[‘fab’, ‘apple’]} />
但是写icon的时候没有智能提示了,有什么解决办法么?

写回答

1回答

张轩

2020-05-22

同学你好

参看文档发现,如果直接写字符串的 Icon 名称,他会默认类型为 fas 而不是 fab,就会出现找不到图标的问题。

There's one another piece of magic that's happening in the background when providing icon names as strings like this: the fas prefix (for Font Awesome Solid) is being inferred as the default. Later, we'll look at what that means and how we can do something different than the default


所以目前的解决方案就是使用前缀,就是数组第一项是指明类型的。

智能提示我刚才试了一下是有的,而且很清楚的提示,第一个是类型,第二个是图标。因为 IconProps 声明如下:

export type IconProp = IconName | [IconPrefix, IconName] | IconLookup;

你可以再试一下欧。

0
0

React18+TS高仿AntD从零到一打造组件库

设计,开发,测试,发布再到 CI/CD,从0到1造轮子

2124 学习 · 959 问题

查看课程