react+webpack+antd框架自定义使用阿里iconfont图标icon: 'icon-icon_we'不用tybe

如果你使用的是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`属性作为图标的名称来渲染。

步骤如下： 1. 在阿里iconfont官网上选择所需图标，添加到购物车中，并下载对应的图标字体文件。 2. 将字体文件复制到项目中的一个合适的目录下，比如 `src/assets/fonts`。 3. 在项目中安装 `@iconify/react` 和 `@iconify/icons` 包，用于渲染图标。 ``` npm install @iconify/react @iconify/icons --save ``` 4. 在 `webpack.config.js` 文件中配置字体文件的加载器，以及 `less-loader` 和 `css-loader` 的配置。 ``` const IconfontWebpackPlugin = require('iconfont-webpack-plugin'); module.exports = { module: { rules: [ { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { outputPath: 'fonts' } } ] }, { test: /\.less$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'less-loader', options: { lessOptions: { modifyVars: { 'hack': `true;@import "${require.resolve('antd/lib/style/color/colorPalette.less')}";`, 'icon-font-path': '"../assets/fonts/iconfont"' } } } } ] } ] }, plugins: [ new IconfontWebpackPlugin({ resolve: { extensions: ['.tsx'] } }) ] }; ``` 其中，`IconfontWebpackPlugin` 是用于自动将 `@iconify/icons` 中的图标转换成 React 组件，并导出到指定目录的插件。 5. 在代码中使用图标： ``` import { Icon } from '@iconify/react'; import userIcon from '@iconify/icons-ant-design/user'; const MyComponent = () => { return ( <div> <Icon icon={userIcon} /> </div> ); }; ``` 其中，`userIcon` 是从 `@iconify/icons-ant-design` 包中导入的，可以替换成其他需要使用的图标。`Icon` 组件会自动根据图标名称找到对应的字体文件，并渲染出图标。