Taro：阿里图标的使用

最新推荐文章于 2024-04-21 09:51:55 发布
最新推荐文章于 2024-04-21 09:51:55 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Taro 阿里图标 IconFont 文章标签： Taro 阿里图标 IconFont 第三方库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42301205/article/details/106482800
版权

Taro：阿里图标的使用

一、下载图标代码

1、将图标加入购物车

在这里插入图片描述

2、在购物车中将图标添加至项目

在这里插入图片描述

3、获取代码链接

在这里插入图片描述

4、复制代码

在这里插入图片描述

二、创建icon.css并把代码复制进去

将 " .iconfont " 改为 " .icon "

//	src/icon/icon.css

@font-face {
   font-family: "iconfont";
  src: url('//at.alicdn.com/t/font_1856340_sams1s83h8.eot?t=1591019406490'); /* IE9 */
  src: url('//at.alicdn.com/t/font_1856340_sams1s83h8.eot?t=1591019406490#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPwAAsAAAAAB+QAAAOhAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDJIMAATYCJAMQCwoABCAFhG0HQRvrBsiuMTZGWg8Die65y3G2Zdf2vUBHinwT6kD+p818X5J9OmZdEFlr8+7syg4wVIBV4iotUHVOBQRFgzzwXO7fbtrSA+55lGC8tgccWIEGtsnGony78W/G/eZWHaE1kZ5/SYneuNeBaJFroK9R18EHGx83241wZKOZD3DP6aC7rrthXTKhQMN2G8LKxpa2FDxZMJriKwoW7dGQfOPgQQffNvmn20ZYfdLlQhD7n2OmS5AB5V/bXDLi+WhvNB63DiyiLwrkgO9ATtDvAdsAb79OAwGy1GmHOmXcNEiCOYkANBmBxZAZPdFQSiTir1gZg7ZIyHCwAvuD36efViABxhfBnDmpN3wZBj0rPvXnG/4ruh4CgumsAPh1AAe0AwigQaV9CR7F2+Gy1P5CD4AkMZiqq+2n/v+fhEeRS+tfHkAYDpTCLM4BAN0oweFThcMCgk9tWcDgU/8icAA+iFJichXgGoOteX8i8GbO0aBVV186cr5sybQjsetY2YyIM+MiWq6+tL3Hj+M88vVA98OypRZy09b7OFEq1dy8VPj7WuOuCRXp3autZUf60QvlAX20HT81bVcgLHF2dP1YYq2yIAe9c7KxoTZCmOaR8F0HFmf0JvJ2D3XIFv5a/LTXhNTjPr/RfcuSTOke7Tbs8iUuFsfTrWMJjglk1oZozx5i4lBtiOibdLuMfcfTjR25fYcH5RFGV5568yX17Oh7a1L7f+7ftnmVJ9NX0qVLXrFJ9Er2ADec9LIGtKlwWr73H2Ye8IKubvj9sQAA/xdf3jgCuHNNJj8e/8O/QefbL1qY3+8TCwB49psNff8hoLvgjxCogn9M0LFCaCLTIGJF7PB1h9A9NQkMkCUL8D+lgSKvplCWdi4GiFSaAJOhFjipGVJg24FPtm7gJw2ELG2NXJ+tmIujOAJoYysAKXAVmDzXgSuQRgrsS/Ap8xP8CgIOWWYExTtmaxGEeOj
最低0.47元/天 解锁文章
隔壁憨憨
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Taro引入阿里图标
weixin_42861240的博客
05-20 4250
首先进阿里图标下载项目至本地 下载完解压缩打开后将以下文件复制出来 这边我在src下新建一个fonts目录,将上面复制下来的五个文件放到里面（目录名可以自己命名，或者放在其他目录下） 返回到上级也就是src目录下打开app.tsx（或app.js）文件引入 import ‘./fonts/iconfont.css’ 以上就引用完icon,接下来我们来试试效果，在页面中写上以下内...
taro开发小程序引入icon字体库
weixin_30952103的博客
07-25 1948
1、在阿里巴巴字体库选购喜欢的字体并下载压缩文件, 阿里巴巴字体库使用方法 1.进入阿里巴巴字体官网 注册登录 2.按照如图所示1、2、3 创建一个项目3.在首页选择需要的字体添加到购物车,4.在右上角购物车内,将所选图标添加到项目中5.在项目中选择 fontclass 获取在线样式地址 也可以直接下载到本地6.在本地项目中引入该样式即可使用 标签内直接添加 字体类名和选中的类...
如何将icon图标库引入自己的项目中
XIAOYANG55555的博客
10-01 2209
---恢复内容开始--- 今天是18年的国庆，趁着国庆的这股开心劲儿，开开心心的写点东西： 第一篇：关于如何将icon图标库引入自己的项目（此方法Taro，微信小程序，支付宝小程序等均适用，不会存在不会编译错误） 栗子是我常用的----阿里矢量图 具体引入项目栗子是：最近正在在做的Taro项目 栗子如下，如果你是其他项目，本人测试过微信小程序，支付宝小程序，能正常用。 第一步...
Taro+react开发（60) 第三方icon使用
歌谣的博客
09-16 268
<AtIcon prefixClass="icon" value={ isLike===true?"icon-like-select":"icon-like-default" } size="14" color={isLike===true?"#FF7F00":"#999"} ...
探索前沿Web开发：Taro Icons - 灵活、可自定义的图标库
最新发布
gitblog_00012的博客
04-21 274
探索前沿Web开发：Taro Icons - 灵活、可自定义的图标库 项目地址:https://gitcode.com/Jeepeng/taro-icons Taro Icons 是一个专为前端开发者设计的轻量级图标库，旨在提供一套高度可定制、与Taro框架兼容的图标资源。这个项目不仅方便了前端开发者的日常工作，还带来了更丰富的设计选项和更高的代码效率。 项目简介 Taro Icons 包含了一套...
Taro使用阿里图标库方法
三季雨
04-10 483
把stylesheet.css 内容复制到src\style\iconfont.css下， 修改内容如下。app.less引入 @import ‘./style/iconfont.css’;下载后 选择ttf后缀的文件 下载。
【taro】taro-ui使用AtGrid组件，显示icon图标
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-26 1072
问题描述 特喵的taro-ui官网只有image的例子，icon图标的例子居然没有~。我再仔细一看，我…,然后呢？传字符串？还是传对象属性？什么都不说 解决流程 直接上代码 <AtCard title="标题" > <AtGrid onClick={this.handleClick} data={ [ { image:"", iconInfo:{
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
阿里 Symbol 图标的使用
wangshan_api的博客
12-01 1182
阿里 Symbol 图标的使用步骤一：在 github 查询依赖 mini-program-iconfont-cli 包步骤二：进入 taro-iconfont-cli 库中，按照 github 中的步骤操作 图标的引用在项目开发中是一个不可避免的一个问题。然而并不是所有的项目都可以很顺利的引入图标库，例如在微信小程序开发中想要引入阿里图标库中的多色图标。而按照阿里图标库中给出的常规的引入流程就不能达到要求，总会报错。 在阿里图标库中只有 Symbol 类型的图标才支持多色 因此只有在项目中引入阿里 Sy
Taro+react开发（20）--控制icon大小
歌谣的博客
08-04 378
<AtIcon size={20} className="company-icon" value="trash" color="#ccc" ></AtIcon>
taro:使用清单作为数据源的本地浏览器
06-16
使用几个标准清单键，加上一些自定义键，我们拥有呈现元数据和在 TARO 仪表板中设计应用程序所需的所有数据。 想想 Roku（或 Firefox OS），但完全可以作为网页访问（或作为网页从桌面可执行应用程序嵌入到项目中...
echarts-for-taro:t芋头的Echarts组件库
05-17
本项目是在实际开发中总结出来的一套基于ec-canvas封装的适用于Taro版本的图表框架。开发者可以通过简单的配置及 React 的语法，快速开发图表，满足各种可视化需求。 微信小程序预览： 实现过程 1 下载 为了兼容小...
image-cropper-taro:基于taro框架的高性能图片裁剪组件
05-14
基于taro的高性能图片裁剪组件支持移动支持旋转支持缩放可导出绘制的图片的本地地址使用下载代码赋值src/components/ImageCropper 下的文件到你的项目中引入import ImageCropper from "@/components/ImageCropper...
arosome-taro：多端统一开发框架Taro优秀学习资源汇总
02-28
太郎太郎多端统一开发框架Taro优秀学习资源汇总官方资源生态资源文章教程开发技巧示例项目芋头3.2 芋头3 （小程序/ H5） （小程序/ H5） Taro组件库示例 （默认是React，Vue请切到Vue分支） :hundred_points:芋头2 ...
Taro项目引入iconfont 更新 iconfiont
Youyzq的博客
12-30 2102
实现需求： 在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":这里着重强调
taro-ui 中引入和使用 iconfont图标库
业余前端的职业经历
09-12 1995
taro-ui 是 taro的 ui库，虽然有自带的图标，但是吧 可能有些需求的图标还是没有的，需要我们自己来搞，那么inconfont图标库就是一个不错的选择 去图标库中找几个图标 下载到本地 首先你的项目得支持引入本地静态资源，这个好像是默认配好了 不用管 在src文件夹下 创建一个 assets 文件夹 存放静态资源然后就是。css 和 字体 fonts 分别 把我们刚才下载下来的那个 文件解压缩 然后放到指定的文件夹中 （iconfonts.css 放到 css文件夹中。字体的文件 放到字体文件
推荐开源项目：Taro IconFont CLI
gitblog_00076的博客
03-27 357
推荐开源项目：Taro IconFont CLI 项目地址:https://gitcode.com/iconfont-cli/taro-iconfont-cli Taro IconFont CLI 是一个强大的命令行工具，专为前端开发者设计，用于自动化管理和集成自定义图标库到Taro项目中。这个项目基于Node.js构建，旨在简化与IconFont图标库的交互，提升开发效率。 技术分析 1. 基于...
Taro框架-微信小程序-内嵌h5页面
qq_41154522的博客
07-29 1345
Taro框架-微信小程序-内嵌h5页面
zsh: taro: command not found
02-05
zsh 是一种强大的命令行 shell，它是 Bourne shell 的一个扩展版本。它提供了许多有用的功能和改进，使得命令行操作更加高效和便捷。 关于你提到的 "taro: command not found" 错误，这可能是因为你尝试执行了一个名为 "taro" 的命令，但系统没有找到该命令。这可能是因为你没有安装 taro 或者 taro 不在系统的可执行路径中。 要解决这个问题，你可以尝试以下几个步骤： 1. 确保你已经正确安装了 taro。你可以通过运行 `taro -v` 或者 `taro --version` 来检查 taro 是否已经安装，并查看其版本信息。 2. 如果你已经安装了 taro，但仍然出现 "taro: command not found" 错误，那么可能是因为 taro 不在系统的可执行路径中。你可以通过将 taro 的可执行文件所在的路径添加到系统的 PATH 环境变量中来解决这个问题。具体的步骤取决于你使用的操作系统和终端。 - 在 macOS 和 Linux 中，你可以编辑 `~/.zshrc` 文件，并在其中添加类似于 `export PATH="$PATH:/path/to/taro"` 的行，将 `/path/to/taro` 替换为 taro 可执行文件所在的路径。然后保存文件并重新启动终端。 - 在 Windows 中，你可以编辑 `C:\Users\YourUsername\.zshrc` 文件，并在其中添加类似于 `export PATH="$PATH:/path/to/taro"` 的行，将 `/path/to/taro` 替换为 taro 可执行文件所在的路径。然后保存文件并重新启动终端。 3. 如果以上步骤都没有解决问题，那么可能是因为你没有正确安装 taro 或者 taro 的安装存在问题。你可以尝试重新安装 taro，并确保按照官方文档提供的步骤进行操作。 希望以上信息对你有帮助！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值