33|内容组件-icon与阿里图标库的使用

最新推荐文章于 2023-05-06 21:53:12 发布
最新推荐文章于 2023-05-06 21:53:12 发布
阅读量243 收藏
点赞数
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43846020/article/details/108502464
版权

icon

在这里插入图片描述
iconType: [
‘success’, ‘success_no_circle’, ‘info’, ‘warn’, ‘waiting’, ‘cancel’, ‘download’, ‘search’, ‘clear’
]
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

<!--pages/form/form.wxml-->
<icon size="160rpx" type="success"></icon>
<icon size="160rpx" color="red" type="success"> </icon>
<icon color="red" size="160rpx" type="success_no_circle"></icon>

在这里插入图片描述

阿里图标表https://www.iconfont.cn/

在这里插入图片描述
选择你想要的图标加入购物车，然后下载代码，然后把文件放在资源文件里，然后把iconfont.css改为iconfont.wxss

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

<!--pages/form/form.wxml-->
<icon size="160rpx" type="success"></icon>
<icon size="160rpx" color="red" type="success"> </icon>
<icon color="red" size="160rpx" type="success_no_circle"></icon>
<text style="font-size:120rpx;color:black;" class="iconfont icon-laptop"></text>
Asteroid 325
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Clarity国际化分析
国际化梦工厂
03-23 9729
前端的世界永远是那么的日新月异，在过去的几年中，笔者就亲身经历了从原生JS/DOM/Ajax时代，到YUI/jQuery/ExtJS时代，再到Ember/Backbone/Bootstrap时代 ，转而至今日的Angular，React/Redux，Vue，Sass，Less，Node，ES6/7。古圣人尝曰：“江山代有框架出，更领风骚几个月”，诚不吾欺也。然而对所有framework来说，其命运
Vben Admin 自学记录 —— 使用 mock 模拟数据以及模拟api联调接口（持续更新中...）
qq_36842789的博客
05-13 1932
数据 mock&联调相关概念及使用/mock/table/tableMock.ts /src/api/table下添加相关api /src/api/table/tableApi.ts ！注意： 在使用页面使用mock和api前，要先在 /src/settings/componentSetting.ts中修改响应后处理的配置，我自己之前没有设置这里，所以table组件useTable调接口一直不通 componentSetting.ts 在之前的table练习中添加并使用api，注：我的新增、编辑和查看都
Vben Admin 自学记录 —— Table组件的基本使用及练习（持续更新中...）
qq_36842789的博客
05-06 3860
对 antv 的 table 组件进行封装。
引入阿里iconfont图标方法以及注意事项
tuonioooo
12-27 1万+
背景在我们做日常项目时，通常会用到icon图标或者是一些图标字体，阿里iconfont是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式iconfont新建项目官网：https://www.iconfont.cn/   在首页选择【图标管理】-【我的项目】点击 【我的项目】填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。添加图标新建好项目后，找到自己想要的图标
微信小程序添加icon图标教程
Linlietao0587的博客
12-22 2万+
1 官方自带 icon 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html <icon type="success"></icon> type一共有8个 2 自定义添加 阿里巴巴矢量图标库 地址 https://www.iconfont.cn/ 2.1 使用 比如：我搜索 爱心 选择点击 购物车 点击右上方的 购物车 添加至项目 我随便选择 一个 demo项目，然后点确认
Axure 实用组件库（包含elementui-antd-antv-echarts-icon.zip
03-18
在给定的压缩包文件“Axure 实用组件库（包含elementui-antd-antv-echarts-icon.zip”中，包含了一系列与前端框架相关的组件，这些组件将极大地提升Axure在设计时的效率和灵活性。 首先，让我们来详细了解一下这些...
Vue使用阿里图标库
12-16
阿里图标库（Iconfont）提供了丰富的图标资源，能够方便地与各种UI框架结合使用，包括vue-cli3、Element UI和Vant等。以下是如何在Vue项目中使用阿里图标库的详细步骤。 **一、创建Vue项目** 如果你还没有Vue项目，...
flutter阿里图标的使用.zip
12-28
本文将详细介绍如何在Flutter项目中使用阿里图标库，以及通过提供的压缩包文件实现图标应用的步骤。 首先，阿里图标库（Alibaba Icon Font）是一个丰富的图标资源库，包含大量高质量的矢量图标，适用于多种应用场景...
阿里小图标用以替代element-ui图标
08-10
4. **自定义组件**：创建一个Vue组件封装阿里图标库的使用，这样可以在整个项目中统一管理和使用图标。 无论采用哪种方式，都需要确保正确地引入阿里图标库的资源。如果是本地开发，可以下载图标库的CSS文件和字体...
uniapp字体图标的使用
12-31
1. 在uniapp组件中，我们可以通过`<u-icon>`组件来使用字体图标，例如： ```html <u-icon name="logo-ionicons" size="30" color="#007aff"></u-icon> ``` 这里的`name`属性对应字体库中的图标名称，`size`表示图标...
阿里巴巴icon图标尽在掌握(前端如何引入icon库,美丽图标随你处置T.T)
あなたの可愛い41
03-25 7268
前端如何引入icon库挑选图标1.进入阿里矢量图标库[iconfont图标库地址](https://www.iconfont.cn/)2.寻找自己需要的图标加入购物车3.进入购物车，下载代码引用图标我们先来看看下载的需要加入的css代码直接调用封装好的调用效果展示 挑选图标 1.进入阿里矢量图标库iconfont图标库地址 2.寻找自己需要的图标加入购物车 3.进入购物车，下载代码 引用图标 我们先来看看下载的需要加入的css代码 这里是我挑选的三个图标的css代码 @在font-face中代码引入了多个
vue 中引入阿里图标库，封装iconPicker组件
weixin_44875693的博客
08-04 961
vue 中引入阿里图标库，封装iconPicker组件
vue中手动封装iconfont组件（三种引用方式的封装和使用）
艾欢欢的博客
05-07 2631
在线使用 有时候会因网络问题影响用户体验；直接放在 本地使用 ，如果过多使用也会显得繁琐，所以就可以将其封装成一个组件，也方便维护。 ​ 封装基于阿里巴巴图标库的项目图标。 ​ 初次使用iconfont项目参考： 点我查看使用前的准备和三种引用方式介绍 准备 将项目内的图标下载至本地 在了路径 src/assets 下新建文件夹 iconfont ，用来存放字体图标的本地文件 解...
前端项目添加自定义icon图标步骤
热门推荐
骑着代码去流浪
12-01 2万+
在使用MUI框架开发过程中，往往需使用到各式各样的icon图标，而MUI的icon图标库提供的资源并不多，由于icon图标属于字体样式，如果使用图片替代的话，缺点比较明显，比如放大失真，每次联网都要加载等。所以往往需要自己利用其他的icon图标库自定义图标样式，下面借用阿里巴巴矢量图标库为例分享一下如何在MUI中自定义icon图标。 其中，红色字体标出来是容易漏掉的步骤。 一．登陆阿里巴巴矢量
iview-admin使用Iconfont-阿里巴巴矢量图标库的时候，多个Iconfont合并如何使用
wei1992_6的博客
04-26 4311
1.实现的效果 (1)在项目的左侧菜单上的实现的效果 (2)在页面上的button按钮上实现的效果 2.Iconfont-阿里巴巴矢量图标库的下载 (1)Iconfont下载地址:https://www.iconfont.cn (2)如果需要多个图标，最好全部下载好再合并，不然每下载一次就要合并一次，很麻烦,本次只合并两个，分别是测试图标和按钮图标，Iconfont合并只需要下载svg文件 ...
基础内容组件icon，progress，text
sizzurp的博客
08-31 208
<!--index.wxml--> <view class="container"> <!-- icon text progress --> <!-- iconType: [ 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear' ] --> <!-- type 用于定义图标类型，只能是规定范围的类型，
2-6 icon组件
u012717715的博客
05-16 360
icon 基础库 1.0.0 开始支持，低版本需做兼容处理。 图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。 属性 类型 默认值 必填 说明 最低版本 type string 是 icon的类型，有效值：success, success_no_circle, info, warn, waitin...
CSS中content使用字体图标
qq_38721111的博客
01-06 1万+
首先说CSS中的content属性主要用来与：before或者：after伪元素配合使用，用来插入生成内容。 这里我们来看一下淘宝的例子： 目前字体图标使用最广泛的是阿里巴巴的iconfont（具体使用请自行百度），然后找到我们需要的字体图标，点击编译图标， 这个Unicode(16进制)的符号是我们需要的： 然后我这的代码是这样的： 注：其中font-family：“”...
在小程序中使用图标
LANCE的博客
12-02 4158
因为最近在自学微信小程序，掌握了他的基础的使用，包括小程序的语法、小程序的自有组件、小程序的自有API及小程序的自定义组件。 在学玩以上的各方面的知识体系后,我就想着学了这么就的微信小程序,自己总要写出点什么东西来才对的起自己这段时间来的努力吧,当然在使用的时候就遇到一 "图标"这一问题.我们在写vue也好,react项目也好,都会有之间的 ...
react+webpack+antd框架自定义使用阿里iconfont图标icon: 'icon-icon_we'不用type
最新发布
05-19
如果你使用的是Ant Design的Icon组件，你可以通过设置`component`属性来使用自定义的Icon图标，具体步骤如下： 1. 在你的项目中引入阿里iconfont图标库，例如： ```html <link rel="stylesheet" href="//at.alicdn.com/t/font_xxxxxxxx.css"> ``` 2. 将需要使用的Icon图标作为一个React组件导出，例如： ```jsx import React from 'react'; import { createFromIconfontCN } from '@ant-design/icons'; const MyIcon = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_xxxxxxxx.js', }); export default MyIcon; ``` 其中，`createFromIconfontCN`是Ant Design提供的一个工厂函数，用于创建一个Iconfont组件；`scriptUrl`是你的iconfont图标库的js文件地址。 3. 在你的代码中使用`MyIcon`组件并传入`type`属性，例如： ```jsx import React from 'react'; import MyIcon from './MyIcon'; function MyComponent() { return ( <div> <MyIcon type="icon-icon_we" /> </div> ); } export default MyComponent; ``` 这里的`type`属性可以随便设置，因为我们已经通过`createFromIconfontCN`创建了一个自定义的Iconfont组件，它会将`type`属性作为图标的名称来渲染。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值