如何在react项目中使用阿里iconfont字体库的svg图标

最新推荐文章于 2024-08-10 07:40:35 发布

AboyL

最新推荐文章于 2024-08-10 07:40:35 发布

阅读量1.4w

点赞数

分类专栏： react javascript html和css 文章标签： react webpack iconfont svg

本文链接：https://blog.csdn.net/aboyl/article/details/79776563

版权

本文介绍了如何在React项目中使用阿里iconfont字体库的SVG图标。传统方法不支持多彩字体库，但SVG格式可以。通过将Symbol代码导入到font.js，然后在项目中引入，使用require导入。关键在于className和xlinkHref属性的设置，并在HTML模板或全局CSS中添加样式定义。这样就能实现多彩图标的应用，同时对于多个字体库的情况，可以通过自定义class来区分。

摘要由CSDN通过智能技术生成

阿里的iconfont字体库是一个拥有很多字体图标资源的字体库，我们可以看到里面有很多的多彩图标。但是传统的classname方法跟unicode方法都没有办法支持多彩字体库。只有svg格式的图片才支持。

我们怎么才能使用这个呢？

首先我们将字体图标加入项目以后，在我的项目中会有三份代码生成。

这个时候我们把

把Symbol的代码复制，然后粘贴到了我们自己在项目中新建的font.js文件中就好了。

随后我们要在项目中进行引入，虽然font,js并没有模块化，但是还是可以直接使用requier进行引入。

import React from 'react';
import { hot } from 'react-hot-loader';
import { Hello } from './components/hello.jsx';
require('./font.js');

class App extends React.Component {
  constructor(){
    super();
    console.log("App");
  }
  render() {
    return (
      <div>
        <h1>
          <Hello />
          Hello<br />
          <input type="text" name="" id="" />