onethink做的企业网站,长沙微信公众号开发,佛山最好的网站建设,优化 保证排名【React】前端项目引入阿里图标 方式11、登录自己的iconfont-阿里巴巴矢量图标库#xff0c;把需要的图标加入到自己的项目中去#xff1b;2、加入并进入到项目中去选择Font class 并下载到本地3、得到的文件夹如下4. 把红框中的部分粘贴到自己的项目中#xff08;public 文… 【React】前端项目引入阿里图标 方式11、登录自己的iconfont-阿里巴巴矢量图标库把需要的图标加入到自己的项目中去2、加入并进入到项目中去选择Font class 并下载到本地3、得到的文件夹如下4. 把红框中的部分粘贴到自己的项目中public 文件目录下5、在public文件夹下的 index.html 引入字体图标,注意引入路径要正确6. 项目中使用图标 方式21、登录自己的iconfont-阿里巴巴矢量图标库把需要的图标加入到自己的项目中去2、加入并进入到项目中去选择Symbol点击复制代码3、安装ant-design/icons4. 新建一个MyIcon.js文件内容如下5、在项目中使用 方式1
1、登录自己的iconfont-阿里巴巴矢量图标库把需要的图标加入到自己的项目中去 2、加入并进入到项目中去选择Font class 并下载到本地 3、得到的文件夹如下 4. 把红框中的部分粘贴到自己的项目中public 文件目录下 5、在public文件夹下的 index.html 引入字体图标,注意引入路径要正确
link relstylesheet href./iconfont/iconfont.css // 引入阿里云字体图标css6. 项目中使用图标
//注意iconfont是固定的icon-sousuokuang为图片红框部分
i classNameiconfont sousuokuang/i注意iconfont是固定的icon-sousuokuang为图片红框部分
方式2
1、登录自己的iconfont-阿里巴巴矢量图标库把需要的图标加入到自己的项目中去 2、加入并进入到项目中去选择Symbol点击复制代码
重点注意记得先点击更新代码再点击复制获取得到链接在开发中有一个坑有些同学中途在图标项目中添加了新的图标然后没有及时更新获取链接导致使用新图标时不显示。
3、安装ant-design/icons
npm install --save ant-design/icons4. 新建一个MyIcon.js文件内容如下
import { createFromIconfontCN } from ant-design/icons;
const MyIcon createFromIconfontCN({scriptUrl: //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js, // 在 iconfont.cn 上生成
});
export default MyIcon5、在项目中使用
//引入图标组件,注意路径
import MyIcon from ./MyIcon.js
MyIcon type(你的icon名字)/注意你的icon名字 icon-sousuokuang为图片红框部分 最后如果能帮到您
