推荐一款超微型SVG图标库：Super Tiny Icons

于 2024-05-10 10:00:23 发布
阅读量906 收藏 19
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitblog_00002/article/details/138652379
版权

推荐一款超微型SVG图标库：Super Tiny Icons

在网页设计和开发中，寻找轻量级且易于集成的图标资源总是一项挑战。而今天，我们向您推荐一个非常特别的开源项目——Super Tiny Icons。这个项目以极小的体积提供了大量知名品牌的SVG图标，每个图标的大小都小于1KB！

项目介绍

Super Tiny Icons是一组微小但精细的SVG格式的品牌logo图标。目前包含了364个图标，平均每个图标仅为521字节。这些图标采用512x512的viewbox，可以在任何尺寸下保持清晰，适合用于各种网站和应用的设计中。

该项目由Edent创建并维护，他同时也是一位知名的开发者和博主。为了支持他的工作，您可以考虑通过Ko-Fi捐赠一杯咖啡表示感谢。

项目技术分析

该项目的图标文件以SVG格式存储，这是一种基于XML的矢量图形标准。SVG的可缩放特性使得这些图标无论放大还是缩小都能保持高质量，且其文件大小远低于同等质量的PNG或JPEG图像。通过查看项目中的例子，我们可以看到，即使是最复杂的图标，如Amazon，也只有642字节；而最简洁的图标，如Flickr，更是只有235字节。

应用场景

Super Tiny Icons适用于：

  • 网站页脚的社会媒体链接
  • 应用程序中的品牌标志
  • 数据可视化工具中的标记元素
  • 轻量级移动应用UI
  • 任何需要节省空间却又要求高辨识度的地方

项目特点

  1. 极致小巧 - 所有图标都在1KB以下，最小的甚至不到200字节。
  2. 高质量 - 尽管体积小，但每个图标都保留了原始品牌标志的细节。
  3. 灵活性 - 可缩放的SVG格式确保图标在不同设备和屏幕尺寸上看起来完美。
  4. 广泛覆盖 - 目前已涵盖364个知名品牌和平台的图标，涵盖了从科技巨头到社交网络的各种领域。

部分可用图标示例

| GitHub | Twitter | Flickr | 1Password | Acast | Access | | --- | --- | --- | --- | --- | --- | | GitHub | Twitter | Flickr | 1Password | Acast | Access |

Super Tiny Icons将帮助您轻松地在您的项目中添加这些小巧可爱的图标，提升视觉效果的同时又不会增加过多的加载时间。立即尝试并体验一下它们的魅力吧！

司莹嫣Maude
关注
  • 5
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
SVG小图标
weixin_44593658的博客
12-16 716
我们现在使用SVG更多是在绘制小图片icon 因为它强大的功能以及不失真的特点 下面上代码画一个导航栏和小信封 导航栏 for(var i=1; i<4; i++){ //循环三次分别画三个圆和三个圆角矩形 var circle = document.createElementNS('http://www.w3.org/2000/svg','circle'); circl...
svg制作小图标
weixin_34249367的博客
02-17 4651
什么是svg svg(scalable vector graphics)可缩略矢量图形。视网膜屏下分辨率解决方案之一。比如在iphone设备下devicePixelRatio大于1的情况下，防止图片模糊就可以使用svg的图片。svg是基于xml的标记语言。编辑起来类似于html构建页面一样。学习曲线平滑。实际应用于背景图片，小图标的场景较多。 如果获取svg 既然svg常作为图标使用，那么如何复用...
svelte-super-tiny-icons:超级微型图标作为Svelte组件
05-03
超级超级微型图标 作为Svelte组件。 在尝试一下。 安装 此零依赖库要求Svelte版本> = 3.20，因为它使用$$restProps 。 yarn add -D svelte-super-tiny-icons # OR npm i -D svelte-super-tiny-icons 用法 < script > import { Svelte } from " svelte-super-tiny-icons " ; </ script > < Svelte width ={> 有关图标列表，请参见 。 原料药 $$restProps将转发到svg元素。 转发的事件 上：点击 上：鼠标悬停 上：鼠标输入 开启：鼠标移出 on：keydown 使用svelte：component < script > import * as icons from "
使用svg-sprite-loader构建SVG小图标
weixin_46759393的博客
07-03 296
第一步安装插件svg-sprite-loader npm install svg-sprite-loader -D 第二步配置插件vue,config.js 'use strict' const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } module.exports = { configureWebpack: { resolve: { .
HTML/CSS——网页SVG ICON(小图标)解决方案
无限迭代中......
08-29 7495
一、基本概念 SVG： SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 二、SVG 的历史和优势 在 2003 ...
Bootstrap Icons开源SVG图标库-其他
06-29
Bootstrap Icons是Bootstrap开源的SVG图标库，此图标库起初专门针对其从表单控件到导航等组件和文档进行定制设计和构建，现在可以免费用于任何项目，无论此项目是否使用了Bootstrap。 Bootstrap Icons是SVG图标库，...
react-svg-icons：一个模板存储库，用于为React使用者快速设置SVG图标库
02-04
SVG图标 这是用于快速搭建React SVG Icon库的模板存储库。 安装 该存储库未发布。 它作为模板存储库存在，供您使用，填充SVG以及维护Icon库！ 如果您使用此模板存储库，请确保.browserslistrc和svgo.config.js与使...
SuperTinyIcons：每个1KB以下！ Super Tiny Icons是您喜欢的网站和应用程序徽标的微型SVG版本
02-04
Super Tiny Web Icons是您喜欢的徽标的极小的SVG版本。 平均大小小于465字节！ 徽标具有512x512的视图框，它们可容纳在半径为256的圆形中。它们将根据您的需要进行缩放。 说谢谢！多么小？ 542字节SVG 7,225字节PNG...
carbon-icons:Carbon Design System的SVG图标库
03-11
碳图标 碳设计系统的图标 入门 使用运行以下命令： npm install -S carbon-icons 如果您喜欢 ，请改用以下命令： yarn add carbon-icons :books: 文件 链接
【vue】svg-icon小图标选择器
小朋友的博客
12-11 3045
svg-icon小图标选择器
含泪整理最优质老板svg图标素材，你想要的这里都有
m0_66323106的博客
04-12 523
今天小编针对老板svg图标素材为大家整理了很多内容哦，肯定有需要的小伙伴吧，实用、免费、优质的素材谁又不心动呢，赶紧码住 因为小编的工作原因，经常会使用到老板svg图标素材，所以自己也寻找了很多的相关素材，在自己使用了一段时间后，发现了一个网站里面的老板svg图标资源，不仅质量好，数量多，新用户注册可以免费下载哦，很多资源也是免费的噢 为大家整理了（cc0）svg图标-老板svg图标合集 为了方便大家更快的找到资源，小编给大家指引路线： 搜索【爱给网】，进入网站后-点击-平面-图标-（cc0）svg
如何在VUE项目中使用svg图标
最新发布
m0_57524265的博客
07-01 1万+
本文手把手带你一起体验SVG图标的使用，解决大家使用图标的苦恼！
有了这些开源 Icon 库，妈妈再也不担心我的 UI 太丑啦！
quanzhan_King的博客
06-13 2191
与拼凑混搭的图标库不同，Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的，在拥有完美像素对齐的基础上，确保每一枚图标风格一致且简洁易读。图标以 24x24 网格为基准，分为 “线性图标” 和 “面型图标” 两种风格，其图标风格为中性风格，适用于各种用户群体的项目。该系统图标库包含常用的图标，如用于媒体播放、通讯、内容编辑、连接等等，其图标在 Web 应用，安卓和 iOS 设计均适用。Remix Icon 是一套面向设计师和开发者的开源图标库，所有的图标均可免费用于个人项目和商业项目。
svg-icon的使用
web_1993的博客
03-16 1万+
1.webpack.base.conf中配置svg的依赖和loader { test: /\.svg$/, loader: 'svg-sprite-loader', include: [resolve('src/icon')], options: { symb...
超实用的高清图标SVG解决方案全总结(上)
熊宗的博客
11-04 8876
随着硬件快速的发展，Retina技术发展至今，目前Google Nexus6的devicePixelRatio已经到了3.5，虽然目前主流的Retina显示器还是以 devicePixelRatio = 2的为主，但是为了更好的用户体验，前端和视觉同学经常都要为了各种图标能够在Retina屏幕下高清显示而头痛。下 面先介绍下目前的一些常规的解决方案。 多倍图片 目前用的比较
使用svg自定义图标
花落微凉梦清幽的博客
07-25 2870
svg是H5新增的一个标签，但是里面包含大量的属性，如果要我们自己用代码编写svg图标，复杂的难度很大，换个角度，我们可以自己画图然后在成svg代码； 1.首先在百度搜索svg在线编辑器，在编辑器中可以画出自己想要的图标，然后再把图标导出为svg图片，把该图片拖入text编辑器就自动展示了svg代码，然后我们只需将这些代码放入dom标签中就OK了： &lt;template&gt; ...
svg实现小图标，绘制文本
u012183426的博客
08-13 1741
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt;&lt;/style&gt; &lt;/head&
Vue-svg小图标使用以及配置文件步骤详解
weixin_54902466的博客
04-20 778
提示：本章节技术分享为针对Vue中如何快速使用svg小图标进行配置文件步骤详解 文章目录前言1.文件配置步骤1.安装loader2.配置vue.config.js3.配置相对文件及创建一个svg图标的组件4.创建icons文件夹，在index.js中注册成全局组件5.在main.js中引入icons/index.js6.收集以及运用7.使用组件8.下载以及详细学习总结 前言 提示：svg小图标作为前端点缀页面不可缺少的元素之一,怎样配置文件才能快速使用小图标是我们需要快速了解的 提示：以下是本篇文章正
实现一个svg扫描动画小图标
qq_34415621的博客
06-01 541
sss前言防抖函数 前言 js语言里的闭包,this等知识点通常会难到许多初学者,好在稍难一点的东西网上都能找到例程,或者已经被人封装过. 但是总有一天你会想更深入的了解一点,下面是本人学习时的理解,有错请指正. 防抖函数 网上找到最常见的防抖函数 timeout就是一个闭包方式产生的变量,当你调用debounce函数以后,return的函数中会继续引用timeout变量,所以不会被gc回收,于是timeout就相当于return函数的"全局变量",但真正的全局变量并没有被污染,这就是闭包的好处. func
用vite发布自己的svg图标库
06-07
好的，我能为您提供一些关于使用Vite发布自己的SVG图标库的指导。首先，您需要创建一个包含所有SVG图标的文件夹，例如“icons”。接下来，您需要在项目根目录下创建一个“vite.config.js”文件，内容如下： ```javascript import svgLoader from 'vite-svg-loader'; export default { plugins: [svgLoader()], } ``` 这将使Vite能够正确地加载和处理SVG文件。接下来，在您的项目中，您可以使用“@svg”别名来引用SVG文件夹中的文件。例如： ```javascript import { ReactComponent as Logo } from '@/icons/logo.svg'; function App() { return ( <div> <Logo /> </div> ); } ``` 最后，您可以使用“npm publish”或“yarn publish”命令将您的SVG图标库发布到npm上。这样，其他人就可以像使用其他npm包一样使用您的图标库了。 希望这能帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

司莹嫣Maude

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值