Taro 框架中使用iconfont 阿里巴巴矢量图标 class版

于 2024-07-30 16:19:28 发布
阅读量353 收藏
点赞数 8
分类专栏： 前端经验 笔记 文章标签： taro
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lele66688888/article/details/140799373
版权

想必大家都知道这个图标库的 图标还是很多的‘

大家应该都也用过 

最进开发 Taro + nut-ui 的H5 移动端的时候 我发现一些图标我在组件库中找不到 我看到了nut-ui 中还有另一种使用方法

这个叫做 自定一图标 、

我来用实际操作 代码 来介绍一下 这个怎么使用 

我总结文章 

第一 给大家分享技术 

第二 自己做总结 因为总是忘记

① 选择好自己想要的图标 添加到项目

② 下载到本地

这里说明一下 很多的方式使用 我们在这里使用 下载文件的方式

下载下来文件 是这样的

③.在Taro 项目中引入

把下载的文件夹 放到 这个项目 目录中 文件夹

引入成功以后

④ 使用

就正如 在nut-ui 组件库中所说的那样 的使用方式

一口一个人.
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Taro：阿里图标的使用
weixin_42301205的博客
06-01 1538
Taro：阿里图标的使用一、下载图标代码1、将图标加入购物车2、在购物车中将图标添加至项目3、获取代码链接4、复制代码二、创建icon.css并把代码复制进去三、在app.jsx中引入icon.css四、使用图标1、安装taro-ui2、代码五、效果展示 一、下载图标代码 1、将图标加入购物车 2、在购物车中将图标添加至项目 3、获取代码链接 4、复制代码 二、创建icon.css并把代码复制进去 将 " .iconfont " 改为 " .icon " // src/icon/icon.css
【解决】阿里巴巴矢量图标iconfont库集成步骤
llw6868的博客
12-15 374
Taro React 微信小程序 集成集成阿里矢量图标icon库步骤
taro-iconfont-cli:在Taro框架中使用iconfont图标，支持多端，支持多色彩，不依赖字体
05-02
taro-iconfont-cli 在Taro框架中使用iconfont图标，不依赖字体，支持多色彩。 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 H5 特性 1、一键生成标准组件，多端支持 2、使用方便，import即可 3、支持多色彩 4、支持自定义颜色 5、支持es6和typescript两种模式 Step 1 安装插件 如果您使用Taro2.x，请安装 taro-iconfont-cli@2.1.0，并阅读旧版的 # Yarn yarn add taro-iconfont-cli --dev # Npm npm install taro-iconfont-cli --save-dev Step 2 生成配置文件 npx iconfont-init # 可传入配置输出路径 # npx iconfont-init --output iconfont.json
Taro使用阿里图标库Iconfont
qq_26258865的博客
01-02 7659
Taro使用阿里图标库Iconfont下载阿里图标库至本地在Taro项目中使用啦 下载阿里图标库至本地 选择图标加入到我的项目 下载至本地 解压拷贝出iconfont.css和iconfont.eot两个文件至项目中 在Taro项目中使用啦 在 app.js中全局引入引入阿里图标库的样式 //引入阿里图标库 import './assets/css/iconfont.css' 准备...
Taro中使用IconFont
baidu_33853807的博客
04-02 1923
IconFont库 https://github.com/iconfont-cli/taro-iconfont-cli 注意点 1.Taro版本 如果您使用Taro2.x，请安装 taro-iconfont-cli@2.1.0，并阅读旧版的README.md 2.配置文件 { "symbol_url": "请参考README.md，复制 http://iconfont.cn 官网提供的JS链接", "save_dir": "./iconfont", "use_typescri.
taro-ui 中引入和使用 iconfont图标库
业余前端的职业经历
09-12 2174
taro-ui 是 taro的 ui库，虽然有自带的图标，但是吧 可能有些需求的图标还是没有的，需要我们自己来搞，那么inconfont图标库就是一个不错的选择 去图标库中找几个图标 下载到本地 首先你的项目得支持引入本地静态资源，这个好像是默认配好了 不用管 在src文件夹下 创建一个 assets 文件夹 存放静态资源然后就是。css 和 字体 fonts 分别 把我们刚才下载下来的那个 文件解压缩 然后放到指定的文件夹中 （iconfonts.css 放到 css文件夹中。字体的文件 放到字体文件
Taro项目引入iconfont 更新 iconfiont
Youyzq的博客
12-30 2185
实现需求： 在Taro框架编译成的微信小程序/支付宝小程序等中使用iconfont图标 推荐插件 taro-iconfont-cli 老样子第一步、安装插件直接下载 npm install taro-iconfont-cli --save-dev 第二步 生成配置文件 npx iconfont-init 配置文件大概内容 { "symbol_url": "//at.alicdn.com/t/font_937195_r92oas7kdg.js", // "symbol_url":这里着重强调
在微信小程序中使用阿里图标库Iconfont
Jana Jing的分享
12-16 225
点击 ‘下载至本地’,并解压文件夹 把这几个文件放在小程序项目中, 在app.wxss中引入iconfont.css,然后其他地方就可以使用了
Taro引入阿里图标
weixin_42861240的博客
05-20 4281
首先进阿里图标下载项目至本地 下载完解压缩打开后将以下文件复制出来 这边我在src下新建一个fonts目录,将上面复制下来的五个文件放到里面（目录名可以自己命名，或者放在其他目录下） 返回到上级也就是src目录下打开app.tsx（或app.js）文件引入 import ‘./fonts/iconfont.css’ 以上就引用完icon,接下来我们来试试效果，在页面中写上以下内...
推荐开源项目：Taro IconFont CLI
gitblog_00076的博客
03-27 392
推荐开源项目：Taro IconFont CLI taro-iconfont-cli项目地址:https://gitcode.com/gh_mirrors/ta/taro-iconfont-cli 是一个强大的命令行工具，专为前端开发者设计，用于自动化管理和集成自定义图标库到Taro项目中。这个项目基于Node.js构建，旨在简化与IconFont图标库的交互，提升开发效率。 技术分析 1. 基...
[Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
runwuwushengxiyu的博客
06-22 574
[Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题
Taro+react开发（56) 引用第三方icon
歌谣的博客
09-13 244
<AtIcon className="que_header_left_icon" prefixClass="icon" value="icon-share" size="16" ></AtIcon>
Taro使用阿里图标库方法
三季雨
04-10 555
把stylesheet.css 内容复制到src\style\iconfont.css下， 修改内容如下。app.less引入 @import ‘./style/iconfont.css’;下载后 选择ttf后缀的文件 下载。
探索前沿Web开发：Taro Icons - 灵活、可自定义的图标库
最新发布
gitblog_00012的博客
04-21 327
探索前沿Web开发：Taro Icons - 灵活、可自定义的图标库 项目地址:https://gitcode.com/Jeepeng/taro-icons Taro Icons 是一个专为前端开发者设计的轻量级图标库，旨在提供一套高度可定制、与Taro框架兼容的图标资源。这个项目不仅方便了前端开发者的日常工作，还带来了更丰富的设计选项和更高的代码效率。 项目简介 Taro Icons 包含了一套...
【taro】taro-ui使用AtGrid组件，显示icon图标
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 1104
问题描述 特喵的taro-ui官网只有image的例子，icon图标的例子居然没有~。我再仔细一看，我…,然后呢？传字符串？还是传对象属性？什么都不说 解决流程 直接上代码 <AtCard title="标题" > <AtGrid onClick={this.handleClick} data={ [ { image:"", iconInfo:{
taro开发小程序引入icon字体库
weixin_30952103的博客
07-25 1958
1、在阿里巴巴字体库选购喜欢的字体并下载压缩文件, 阿里巴巴字体库使用方法 1.进入阿里巴巴字体官网 注册登录 2.按照如图所示1、2、3 创建一个项目3.在首页选择需要的字体添加到购物车,4.在右上角购物车内,将所选图标添加到项目中5.在项目中选择 fontclass 获取在线样式地址 也可以直接下载到本地6.在本地项目中引入该样式即可使用 标签内直接添加 字体类名和选中的类...
Taro+react开发（60) 第三方icon使用
歌谣的博客
09-16 281
<AtIcon prefixClass="icon" value={ isLike===true?"icon-like-select":"icon-like-default" } size="14" color={isLike===true?"#FF7F00":"#999"} ...
taro框架能直接使用echart么
07-15
可以的，Taro框架可以直接使用ECharts。ECharts是一个强大的数据可视化库，可以通过Taro框架将其集成到小程序、H5等多端应用中。你可以通过在Taro项目中引入ECharts的相关包，并使用ECharts提供的API来创建图表、配置图表样式等。具体的使用方式可以参考ECharts和Taro的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值