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

水深无声 2024-03-17 21:07 114阅读 0赞

### 简介 ###

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

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

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

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

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

### 前端引入步骤 ###

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

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

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

点击 + 号创建项目

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#### 2、进行小程序引入图标 ####

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

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

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

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

引入成功

[img-1dnvU5LX-1689579204567_E_PRD_Images_image-20230706141759441.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/1b31a86dcefe4c49be27c6449f75d31b.png
[img-lpW793Zb-1689579204569_E_PRD_Images_image-20230706142000318.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/c3932af616a64aa79db491ff67b24c20.png
[img-QCTJZJop-1689579204569_E_PRD_Images_image-20230706142109865.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e16da0f370de4b9196729ea219bdd47d.png
[img-5qgmw8iq-1689579204569_E_PRD_Images_image-20230706142245771.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/15fa808fa4084909b32db59b81a28d32.png
[img-0bjSUKtR-1689579204570_E_PRD_Images_image-20230706143732694.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/701e65db10e04c22b2d1de7f30cb4222.png
[img-tnSxKUsU-1689579204570_E_PRD_Images_image-20230706142451070.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3370d3aa293342f68503b201bf804f42.png
[img-gclA2tGQ-1689579204571_E_PRD_Images_image-20230706143941445.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/f5c3602e0de54b6d9ebe19ab3e8687d1.png
[img-48qTGyVR-1689579204571_E_PRD_Images_image-20230706144058457.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/86ab23a559c24af893674a32c4c18e7e.png
[img-lp58NDyw-1689579204572_E_PRD_Images_image-20230706144225809.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/caaabe1aab6142dba8e5c3885b3c32a5.png
[img-aPgSfZpY-1689579204572_E_PRD_Images_image-20230706144259798.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/88a1fc37039346ccb438be752143e0c1.png
[img-G9pDoFCp-1689579204572_E_PRD_Images_image-20230706145207216.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/3c7decc2e6b34c73bbc7d49471ae8fc9.png
[img-NFlIhhEK-1689579204573_E_PRD_Images_image-20230706151559194.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/60e62729cd254f0ca41288b95f054848.png