react项目中引入在线的iconfont 图标

1.我们在使用字体图标的时候，有时候ui库的字体图标不能满足我们的需求，我们这时候需要引进外部的icon，这里我们用到的是https://www.iconfont.cn/

2.字体图标库分为线上和线下的，线下的不用多说直接下载解压，把css文件cope到项目中去即可，当然我们有时候不需要下载下来去引用的话，这一方面节省更小的项目大小

3.在登陆字体图标库的时候，我们先新建项目然后再选择Symbol，如下所示：

4.打开iconfont搜索图标并且添加到购物车，将购物车中的图标添加到项目中，若是新项目，则可以新建项目

5.选择symbol方式，生成在线链接，如下图所示：

6.将生成的链接复制到react项目public目录下index.html文件中，通过script标签引入，如下图所示：

7.在项目中需要使用到图标的地方用以下svg标签方式引入，你复制的icon代码需要在前面加上#哦

 render() {return ({/*  */}
{/* 字体图标 */}Start
你可以在 src/App.js 文件中修改。
);}

8.需要修改样式的话，在引入的单独的css文件中修改即可：

.icon{
width: 50px;
display: block;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！