小程序引入阿里云矢量图库图标

article/2025/8/23 7:55:23

简介

阿里云矢量图库（Aliyun Vector Icon Library）是阿里云提供的一个图标库，为开发者和设计师提供了丰富的矢量图标资源，用于在网页、移动应用和其他设计项目中使用。

使用阿里云矢量图库，你可以快速搜索、选择和下载各种类型的矢量图标，满足你的设计需求。该图库包括了多个图标集合，涵盖了不同主题和领域的图标，例如常用的 UI 图标、通用图标、品牌图标等。

要使用阿里云矢量图库，你可以访问官方网站（https://www.iconfont.cn/），注册一个账号，并进行登录。登录后，你可以浏览和搜索图标，将你需要的图标添加到你的项目中，并下载相应的图标文件（通常是 SVG 格式）。

此外，阿里云矢量图库还提供了一些便捷的功能，如图标的在线编辑、自定义图标库、图标的样式更改等，以满足不同的设计需求和个性化要求。

请注意，阿里云矢量图库可能有一些使用限制和许可要求，请在使用前仔细阅读并遵守相关的使用条款和许可协议。

前端引入步骤

1、在iconfont官网平台生成css代码

创建一个项目（进入我的项目，点击创建项目）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1dnvU5LX-1689579204567)(E:\PRD\Images\image-20230706141759441.png)]$

点击 + 号创建项目

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpW793Zb-1689579204569)(E:\PRD\Images\image-20230706142000318.png)]$

输入相关的信息，创建项目

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QCTJZJop-1689579204569)(E:\PRD\Images\image-20230706142109865.png)]$

在图标库找到对应的图标，点击购物车

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5qgmw8iq-1689579204569)(E:\PRD\Images\image-20230706142245771.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0bjSUKtR-1689579204570)(E:\PRD\Images\image-20230706143732694.png)]$

点击添加至项目 --》选择对应的项目 --》点击确定

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tnSxKUsU-1689579204570)(E:\PRD\Images\image-20230706142451070.png)]$

这里我只提供一种方法（Font class），一共有三种，感兴趣的自己去百度吧

找到对应的项目 --》点击 Font class --》查看在线链接

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gclA2tGQ-1689579204571)(E:\PRD\Images\image-20230706143941445.png)]$

点击生成，进行相关css文件生成

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48qTGyVR-1689579204571)(E:\PRD\Images\image-20230706144058457.png)]$

将复制的url在浏览器中打开

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lp58NDyw-1689579204572)(E:\PRD\Images\image-20230706144225809.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aPgSfZpY-1689579204572)(E:\PRD\Images\image-20230706144259798.png)]$

2、进行小程序引入图标

将上面浏览器中显示的css代码复制到 wxss文件中

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G9pDoFCp-1689579204572)(E:\PRD\Images\image-20230706145207216.png)]$

通过iconfont 和图标名称进行引入

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NFlIhhEK-1689579204573)(E:\PRD\Images\image-20230706151559194.png)]$

引入成功