一个免费开源的在线图标浏览库

最新推荐文章于 2025-03-04 11:48:43 发布

点九开源

最新推荐文章于 2025-03-04 11:48:43 发布

阅读量1.4k

点赞数 5

分类专栏：点九开源文章标签：开源

本文链接：https://blog.csdn.net/weixin_48194188/article/details/140597295

版权

点九开源专栏收录该内容

9 篇文章

订阅专栏

Iconify是一个开源的图标库和图标管理工具，它提供了丰富多样的图标集合，供开发者在项目中使用。Iconify支持多种前端框架和库，如React、Vue、Angular等，使得在不同项目中使用图标变得更加简单和灵活。

功能特点

丰富的图标库

Iconify包含了数千个图标集合，涵盖了各种不同主题和风格的图标，满足不同项目的需求。

自定义图标

Iconify还允许用户上传和管理自己的图标，使得图标的使用更加个性化和定制化。

跨平台支持

Iconify支持多种前端框架和库，可以在不同的项目中灵活使用。

丰富的Api

支持属性 icon、mode、inline、width、height、flip、rotate，还有一些有用的方法等。

矢量图标

Iconify使用矢量图标，可以无损缩放，并且在高分辨率屏幕上显示效果更佳。

多方式引入

选择使用CDN引入还是本地安装取决于你的项目需求和偏好。如果项目对于外网资源有限制，或者需要在离线环境下使用图标，那么建议使用本地安装方式。

使用方式

Iconify提供了两种方式来使用图标：

CDN引入：

如果你不想安装Iconify的包或者使用其他前端框架，你可以通过CDN直接引入Iconify的图标库。这种方式需要调用外网资源。

<!DOCTYPE html><html><head> <title>Iconify CDN</title> <link href="https://cdn.jsdelivr.net/npm/@iconify/iconify@1.0.0-alpha.16/iconify.min.css" rel="stylesheet"></head><body> <!-- 使用Iconify的图标 --> <i class="iconify" data-icon="mdi:account"></i></body></html>

本地安装：

你也可以通过npm或yarn来安装Iconify的包，并在项目中使用本地的图标资源。这种方式不需要调用外网资源，因为图标资源已经在本地。

<template> <div>   <!-- 使用Iconify的图标 -->   <iconify-icon icon="mdi:account" /> </div></template><script>import '@iconify/iconify@1.0.0-alpha.16';import IconifyIcon from '@iconify/iconify@1.0.0-alpha.16/vue';export default { components: {   IconifyIcon,},};</script>

内网部署

docker run --restart=always -p 3000:3000 --name iconify -d harbor.njydsz.com/library/iconify-api

开源信息

官网地址

https://iconify.design/

开源协议

MIT

开源地址

https://github.com/iconify/api

下·