React ts 引入iconfont图标方法以及注意事项

最新推荐文章于 2024-07-03 21:57:01 发布
最新推荐文章于 2024-07-03 21:57:01 发布
阅读量1.2k 收藏
点赞数
文章标签： react.js javascript 前端 typescript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ds_xiaobai/article/details/125899131
版权
本文介绍了如何在React TypeScript项目中引入和使用Iconfont图标，包括从iconfont官网下载资源并放入项目public目录，以及在index.html中引入样式。当遇到引入后页面不生效的问题时，提供了在.stylelintignore中忽略iconfont.css文件和在index.tsx中引入的解决方案。
摘要由CSDN通过智能技术生成

react + ts + and 引入在线iconfont字体图标

1. 下载iconfont压缩包

  • iconfont官网，资源管理进入我的项目
    在这里插入图片描述

  • 点击Font class，点击下载至本地
    在这里插入图片描述

  • 解压后，放到自己的项目中，根目录public

  • 在这里插入图片描述

2. 引入项目中及使用

  • 在index.html中将iconfont.css引入
    在这里插入图片描述
  • 页面中使用类名方式：
<
最低0.47元/天 解锁文章
sweet_little_white
关注
react 使用 iconfont Symbol的心得(下载到本地)
weixin_44247693的博客
12-25 1122
1.离线使用symbol 1.下载之后将iconfont文件放到src里面的单独目录里面，要引用图标的js文件记得导入iconfont.css文件 不要加iconfont.js 2…iconfont.js文件单独放到public文件夹，放src里不认识他，然后在index.html中添加引用 2.1 放到public文件夹 2.2 index.html中添加引用 3.相应位置使用svg <svg class="icon" aria-hidden="true" style={{ width: 3
react 项目中使用 iconfont
小秀的博客
05-08 441
将一些样式放到项目中（此时我放入的是项目的全局 css 文件 index.css ），注意需要将 url 路径修改为相对路径。将 ttf 字体文件添加到项目的某个文件夹（这里我的文件夹是 font）内。添加购物车，下载代码，解压。
把 iconfont 的图标下载到 React 项目中使用
最新发布
weixin_48191864的博客
07-03 416
如果使用发现图标自带颜色，那么是因为图标本身是有颜色的，那么在通过 symbol 获取图标时会在 svg 的path 中增加 fill 属性，导致无法更改颜色，如果需要动态修改颜色，需要重新添加该图标(无色的图标)，两种方式修复这个问题 1）获取在 symbol 的 js 文件中程序删除 fill 属性，打开对应 js 文件，全局搜索 fill，删除对应的代码（代码示例：fill="#181818"） 2）去 iconfont 去色后生成新的 js 文件，使用新的 js 文件，3）点击购物车，添加到项目。
在react中使用iconfont
MFWSCQ的博客
10-31 6116
一、基本使用 我们有时候需要像之前直接在html的head中引入iconfont的css文件，然后就能够在html页面中使用iconfont了。首先介绍下iconfont的基本使用如下： 1.先将图标加入购物车，然后下载项目，在html中引入其中的css文件 <link rel="stylesheet" href="./iconFont/iconfont.css"> 2.在h...
RN TSX基于react-native-vector-icons和iconfont.cn 的生成自定义Icon组件的工具
BA陈的博客
03-08 2851
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
react使用字体图标iconfont
xiaocn325的博客
11-21 1317
react使用字体图标iconfont 第一步，进入到iconfont官网，选择图标管理进入我的项目，点击右上角的+号创建自己的项目； 创建完项目后可以去搜索自己想要的的图标，然后点击添加至购物车； 点击左上角的购物车就可以看见自己的图标，然后点击将图标加入自己的项目。 到我的项目下载图标至本地并解压，选择其中这几个文件 将这几个文件放到自己项目中的statics文件夹中，打开ico...
在react native中使用阿里iconfont图标
01-08
1.在阿里图标库中下载好所需的图标到本地。下载解压的目录如下： 打开demo_index.html可以查看下载好的图标，如下： 2.把下载好的字体文件夹里的iconfon.tff复制到src/assets/fonts里 3.在根目录中配置react-...
React Native 中Iconfont图标使用
luke312的博客
03-03 773
文章目录react-native-svg-uri&阿里Iconfont矢量图标使用记录使用方法1.组件下载2.阿里Iconfont下载3.添加svg标签4.使用 react-native-svg-uri&阿里Iconfont矢量图标使用记录 使用方法 svg-uri组件下载 1). 引入 2). 创建工具类 阿里Iconfont图标下载 添加svg标签 使用 1.组件下载 yarn add react-native-svg-uri ----------------------------
react-iconfont-cli:转换iconfont图标为React标准组件，不依赖字体，支持多色彩
05-25
react-iconfont-cli 用纯JS把iconfont.cn的图标转换成React组件，不依赖字体，支持多色彩 特性 1、纯组件，不依赖字体，体积小 2、支持渲染多色彩图标，支持自定义颜色 3、自动化生成图标组件，支持es6和typescript...
react项目如何使用iconfont的方法步骤
12-08
在React项目中集成Iconfont图标库，可以提升项目的可维护性和图标的一致性。下面将详细阐述这个过程，包括配置项目、创建组件以及使用图标。 ### 配置项目 1. **选择图标类型**：Iconfont 提供了两种使用方式，...
基于vue-cli3引入 stylus文件 iconfont
weixin_30918633的博客
07-24 500
一、文档结构 二、全局安装vue-cli npm intall -g @vue/cli // 查看版本号 vue -V 三、vue-cli 创建项目 vue create projectname // 按照文档操作，ctrl + A全选中； space单应用选中或者不选中； enter下一步 四、在vue.config.js 中配置 const path ...
鸿蒙ArkTs中引入阿里巴巴图标库svg图标时fillColor不能改变图标颜色
weixin_55973411的博客
12-20 1332
在ArkTs项目引入阿里巴巴图标库的svg图标直接使用fillColor不能直接修改图标的颜色。是因为直接引入阿里巴巴图标会缺少一个属性，需要手动添加这个属性才能实现改变图标的颜色。点击引入的svg图标 添加fill这个属性。
在Vue3+vite+ts中引入iconfont矢量图标库
m0_67141709的博客
09-02 1764
最后总结一下，如果有兄弟按照我这个步骤写完之后不能显示，那么可能的主要问题是：你的iconfont中没有对应的图标，或者你的引入路径出错了，再或者你在使用的时候出错了，这里的封装其实就是父子传值，所以你只需要按照父子传值的那种方法正确的传值，应该就不会出错了。随着iconfont的更新，还有前端技术的发展，越来越多的人用了vue3+vite+ts了，鄙人最近正好在写一个基于这些技术搭建的项目，也是从小白一路慢慢摸索的。1：选择自己创建的项目中的symbol这里，查看一下在线链接，// 给图标添加上类名。
Vue3 项目引入阿里 iconfont 图标和字体
热门推荐
weixin_42365757的博客
11-02 1万+
Vue3 项目引入阿里 iconfont 图标和字体
React使用iconfont阿里巴巴矢量图库
qq_45634989的博客
11-14 1170
React使用iconfont阿里巴巴矢量图库
手把手教你如何在项目中使用阿里字体图标IconFont
m0_68997646的博客
01-26 3305
手把手教你如何在项目中使用阿里字体图标IconFont
Vite3+Ts+Vue3使用阿里巴巴（iconfont）教程
qq_40899348的博客
08-09 425
该文字主要接收如何正确使用vite3.0引入阿里巴巴iconfont
react 使用iconfont 图标
一起学习前端知识，一起成为前端开发工程师！
10-12 2448
复制链接后，打开项目中的config->defaultSetting.ts将复制好的链接粘贴到iconfontUrl中。之后再进入routes.ts 页面，选择自己想要使用的图标，复制对应的代码，即可使用！
react ts 引入echarts 饼图
07-15
在使用 React 和 TypeScript 引入 ECharts 饼图时，你需要按照以下步骤进行操作： 1. 首先，确保你已经安装了 ECharts 的相关依赖。你可以使用 npm 或 yarn 来进行安装： ```shell npm install echarts ``` ```shell yarn add echarts ``` 2. 创建一个新的 React 组件，用于显示 ECharts 饼图。例如，你可以创建一个名为 `PieChart` 的组件： ```tsx import React, { useEffect, useRef } from 'react'; import echarts from 'echarts'; interface PieChartProps { data: any[]; // 饼图的数据 } const PieChart: React.FC<PieChartProps> = ({ data }) => { const chartRef = useRef<HTMLDivElement>(null); useEffect(() => { if (chartRef.current) { const chart = echarts.init(chartRef.current); const option = { series: [ { type: 'pie', data, }, ], }; chart.setOption(option); } }, [data]); return <div ref={chartRef} style={{ width: '100%', height: '300px' }} />; }; export default PieChart; ``` 3. 在你的页面或其他组件中使用 `PieChart` 组件，并传入饼图所需的数据。例如： ```tsx import React from 'react'; import PieChart from './PieChart'; const App: React.FC = () => { const data = [ { value: 335, name: 'Category 1' }, { value: 310, name: 'Category 2' }, { value: 234, name: 'Category 3' }, { value: 135, name: 'Category 4' }, { value: 1548, name: 'Category 5' }, ]; return ( <div> <h1>ECharts Pie Chart</h1> <PieChart data={data} /> </div> ); }; export default App; ``` 这样，你就可以在 React 应用中引入并使用 ECharts 饼图了。记得根据你的实际需求修改数据和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值