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

大家好，欢迎来到IT知识分享网。

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

下·

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/141868.html