react+webpack+antd框架自定义使用阿里iconfont图标icon: 'icon-icon_we'不用type
时间: 2024-05-15 13:13:01 浏览: 13
如果你使用的是Ant Design的Icon组件,你可以通过设置`component`属性来使用自定义的Icon图标,具体步骤如下:
1. 在你的项目中引入阿里iconfont图标库,例如:
```html
<link rel="stylesheet" href="//at.alicdn.com/t/font_xxxxxxxx.css">
```
2. 将需要使用的Icon图标作为一个React组件导出,例如:
```jsx
import React from 'react';
import { createFromIconfontCN } from '@ant-design/icons';
const MyIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_xxxxxxxx.js',
});
export default MyIcon;
```
其中,`createFromIconfontCN`是Ant Design提供的一个工厂函数,用于创建一个Iconfont组件;`scriptUrl`是你的iconfont图标库的js文件地址。
3. 在你的代码中使用`MyIcon`组件并传入`type`属性,例如:
```jsx
import React from 'react';
import MyIcon from './MyIcon';
function MyComponent() {
return (
<div>
<MyIcon type="icon-icon_we" />
</div>
);
}
export default MyComponent;
```
这里的`type`属性可以随便设置,因为我们已经通过`createFromIconfontCN`创建了一个自定义的Iconfont组件,它会将`type`属性作为图标的名称来渲染。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)