导航:首页 > 软件知识 > 小程序如何设置svg颜色

小程序如何设置svg颜色

发布时间:2024-08-23 13:44:44

㈠ 微信小程序开发 | 如何在小程序中使用自定义 icon 图标

题图:来自 Unsplash.com

本文是微信小程序开发学习笔记。

微信小程序 icon 组件(标签)只提供了 9 种类型的图标,不能满足开发或设计的个性化需求。为了解决这个问题,我们可以使用自定义的 icon 图标,来丰富原有的图标类型。

在微信小程序中使用自定义 icon 图标有 6 种方法:

1.使用 icon 图标(特指位图)

2.使用 Sprite(精灵图)

3.使用 CSS 样式绘制(这种方法工作量大)

4.使用矢量字体

5.使用 SVG 矢量文件

6.使用 Canvas

本文只对第 4 种方法进行说明,因为除了第 1 种方法,其他方法我暂时还都不会。

使用矢量字体来自定义 icon 图标,需要用到阿里巴巴图标库网站 Iconfont。

题外话,以前我一直以为这个网站只能用于设计,直到接触了一些前端的知识,才知道它也能运用到编程中。

打开网站,选择一个自己喜欢的图标,将其添加到购物车,类似购物时将商品添加到购物车的操作,重复操作,将你喜欢的图标一一添加到购物车中。

选择好需要的所有图标后,点击右上角的“购物车”图标。

浏览器右侧会弹出一个面板,选择“添加至项目”,如果你之前未曾创建过项目,这里就需要新建一个项目,新建项目其实就是新建一个文件夹。

将鼠标移动到网页顶部的导航栏“图标管理”,在弹出的菜单中,点击“我的项目”。

在我的项目中,点击“查看在线链接”。

下方会出现一长串代码,其中的 url 链接指向的就是存放在阿里云服务器的矢量字体,这些字体有不同的格式,如 ttf、woff、woff2,之所以需要用到不同的字体格式,是为了兼容不同的设备或系统。

接着点击“点此复制代码”,将代码复制到系统剪贴板中。

回到微信小程序开发者工具中,将代码粘贴到小程序页面的 wxss 文件中,wxss 文件可以类比为普通网页的 css 文件。

接着在 wxss 文件中进一步定义 icon 图标的样式,输入以下的代码:

font-family 指定我们嵌入的字体名称,它需要与 @font-face 中 font-family 的值保持一致 ,color 设置图标的颜色,font-size 设置图标的大小。

icon-heart 和 icon-like 是自定义的类选择器名称(简称类名),你可以根据自己的喜好进行命名,这里的 icon-heart 代表爱心图标,icon-like 代表点赞图标。

content 指定图标的 unicode 编码,获取图标的编码还需要回到 iconfont,将鼠标移动到图标上方,在弹出的菜单中,选择“编辑图标”。

在打开的页面中,左下角的 4 位字符——e8ab,就是爱心图标的 unicode 编码,将其粘贴到 wxss 文件中对应的位置,并在字符前面加上一个反斜杠 \。

获取点赞图标的 unicode 编码,也需要进行同样的操作。

至此,就算完成了 wxss 样式的编辑。

为了在小程序中看到图标最终的渲染效果,我们还需要编辑一下 wxml 文件,wxml 相当于普通网页的 html 文件。在 wxml 中使用 icon 标签,输入如下代码:

这里的 class 属性的值,就是对应 wxss 文件中自定义的类名,通过类名来应用相应的样式。完成以上所有操作,最终的渲染效果如下:

搞得那么费劲,就只为得到两个小图标。。。好像有点得不偿失

扩展阅读:

《 写一个微信小程序的最少必要知识》

以上,希望有帮助。

References

[1] Iconfont: iconfont.cn/

欢迎关注

㈡ 解决小程序自定义图标问题,一键批量生成图标组件(Taro版)

无需赘述,直接来看效果

在Taro小程序开发过程中,你是否曾遭遇过图标配置难题?iconfont的不便、字体图标缺乏直观性、颜色不可变、本地图片图标无法无损缩放,甚至阿里巴巴iconfont矢量图标库的服务不稳定,渐变色支持不足?这些问题迎刃而解,得益于taro-svg-icon-cli这个解决方案。

这个工具利用SVG(可伸缩矢量图形)的特性,能直接生成图标组件,它支持调整图标大小和颜色,确保缩放时图像质量不受损。无需依赖在线字体,只需本地SVG文件即可。taro-svg-icon-cli还利用svgo进行无损压缩,生成的SVG XML代码以内联背景图形式呈现,兼容性良好,大部分移动端应用均适用。

生成的组件具有明确的图标名称,支持代码提示,目前仅针对支付宝、微信小程序进行了编译。灵感来源于taro-iconfont-cli,但实现了本地化的图标编译。

使用起来相当便捷,安装taro-svg-icon-cli,执行初始化命令生成配置文件,将SVG资源放入指定目录,即可一键生成可使用的图标组件,甚至支持生成TypeScript版本。虽然目前主要适用于微信、支付宝小程序,但扩展到其他小程序或Web端Vue、React应用也相对容易,我们欢迎社区贡献代码或fork。

想要了解更多?请访问:github.com/leidenglai/t...

阅读全文

与小程序如何设置svg颜色相关的资料

热点内容
核桃编程程序如何下载 浏览:945
如何正确泄露信息 浏览:696
二手房交易买卖双方税怎么交 浏览:439
博途怎么找下载程序的时间 浏览:37
交易平台哪个最便宜 浏览:360
外倾角数据正负35怎么计算 浏览:610
理财产品的t0模式是什么意思 浏览:389
哪个市场最便宜的东西 浏览:432
你想要了解哪些信息英语翻译 浏览:757
如何在防城港房产网发布信息 浏览:454
工控产品行业网站有哪些 浏览:770
时光代理人怎么没资源 浏览:812
现在游戏币交易最多的是哪个游戏 浏览:35
oppo手机密码忘记怎么解锁保留数据 浏览:42
钉钉打卡如何创建市场部群 浏览:780
法院人事代理什么意思 浏览:24
代理家具哪里好卖 浏览:118
债权交易理财怎么样 浏览:413
手机流氓程序如何删除 浏览:387
t型数据线的正负怎么分辨 浏览:406