web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. AIGC工具
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站
    手机应用

推荐一套开源、高质量的 SVG 图标库——Heroicons

388 ℃

Heroicons 是一套由 Tailwind CSS 团队开发的开源、高质量的 SVG 图标库,专为前端开发设计。它提供多种风格和尺寸的图标,适用于网页和移动应用的界面设计。无论是初创项目还是大型企业级应用, Heroicons 都能为产品增添专业和精致感。

推荐一套开源、高质量的 SVG 图标库——Heroicons

Heroicons推荐理由:

1. 风格多样: Heroicons 提供三种主要风格:
– Outline(描边) :适用于导航和主导航区域,线条清晰,视觉效果简洁。
– Solid(填充) :适用于需要实体感的场景,如按钮或状态指示器。
– Mini(迷你) :适用于小尺寸元素,如按钮或表单元素。
2. 图标数量丰富: Heroicons 包含超过 450 个图标,涵盖常见的 UI 元素、箭头、设备图标等。

3. 支持多种框架: Heroicons 可以轻松集成到 React 、Vue 和 Next.js 等前端框架中,并提供官方的 React 和 Vue 组件库,方便开发者按需导入图标。

4. 易于定制:图标使用简单便捷,除了提供适配 Vue / React 框架的组件包,也可以直接复制为 SVG 矢量图的代码,直接在前端开发使用,或者在设计软件中进行编辑。

5. 免费且开源:遵循 MIT 许可证,用户可以免费使用这些图标,并且无需署名。此外,社区可以贡献新图标或修复现有问题。

6. 手绘风格: Heroicons 的图标采用手绘风格设计,线条流畅且富有现代感,能够提升界面的视觉吸引力。

7. 多尺寸选择:提供多种尺寸选项(如 24×24、20×20、16×16),以适应不同的设计需求。

8. 易于使用:用户可以通过 Heroicons 网站直接复制 SVG 代码或下载文件,也可以通过 npm 安装 Heroicons 组件库,快速集成到项目中。

9. 持续更新: Heroicons 团队定期更新图标库,确保其包含最新和最流行的图标,满足不断变化的设计需求。

Heroicons在项目中使用:

首先安装 @heroicons/vue

npm install @heroicons/vue

在 Vue 文件中使用,每个图标都可以单独引入,按需加载:

<template>
  <div>
    <ArrowLeftCircleIcon/>
    <p>返回</p>
  </div>
</template>

<script setup>
// 导入尺寸20像素填充型图标
import { ArrowLeftCircleIcon } from '@heroicons/vue//20/solid';

// 导入尺寸16像素的描边型图标
import { ArrowLeftCircleIcon } from '@heroicons/vue/16/outline';

//导入尺寸为24像素的填充图标
import { ArrowLeftCircleIcon } from '@heroicons/vue/24/solid'
</script>

进入Heroicons官网入口

OpenStickers:国外知名设计团队Craftwork发布的一套免费开源的贴纸插画素材库

一个提供大量免费商用图片和短视频素材的网站——Pikwizard

一个专为设计与开发提供的免费开源图标库——MingCute Icon

一个拥有数千张由全球摄影师社区拍摄的高分辨率、免版税图片库——Burst

FoodiesFeed:一个专门提供各种好看的食物、食材、料理高清图片的图片网站

标签: SVG格式图标库 免费商用图库 设计资源

上面是“推荐一套开源、高质量的 SVG 图标库——Heroicons”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_16896.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > 前端知识
本文共计1152个字,预计阅读时长8分钟

基金从业资格考试题库

一站式备考基金从业资格考试,收录2021-2025年模拟题库!呱呱工具箱

AI工作站

收录全球3800+ 款各行各业AI应用,轻轻松松做事!

生活小工具

收录了万年历、老黄历、八字智能排盘等100+款小工具!生活小工具
上一篇: 推荐一款宝藏型工具应用类网站——一个木匣
下一篇: 推荐一款拥有江西情怀的免费可商用字体——江西拙楷体
x 打工人ai神器