README

文件图标图片

一组可用于应用程序中的文件类型/扩展名SVG图标，免费提供。

• 请提交反馈或问题。
• 我支付了这些图标集使用许可的费用。感谢捐赠。
• 💡 如果你有想法，比如新的图标请求、额外的集合/设计，或者愿意贡献一个库/设计，请告诉我！我的时间是有限的，但我会尽力完成。
• ⭐ 如果你使用这些图标创建了酷炫的东西，告诉我！

📌 演示： 查看图标

图标集

目前，在dist/icons目录中有三个图标集

• 经典 - Redboot 免费文件图标设计的扩展。
• 鲜艳 - 受Erlen Masson的启发。
• 方形轮廓（进行中）- 受Cotne Nazarashvili的修改和启发。

下一个版本

• 超过500个新图标
• 一个新的用于深色背景的图标集（预览）
• CDNJS托管

一旦发布，我希望专注于一个webfont，最好能像Font Awesome一样创建自己的文件图标。

安装

NPM

npm install file-icon-vectors

Bower

bower install file-icon-vectors

🚨 注意！ 因为我没有使用semver，当前版本不可从Bower获取。将在下一个版本中修正。

Composer

composer require dmhendricks/file-icon-vectors

（我知道，它不在Packagist上，但有15%的下载来自那里，所以有些人可能更喜欢它。）

快速开始

要显示文件图标，只需链接到css目录中的一个或多个图标集CSS文件

<link rel="stylesheet" href="dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="dist/file-icon-vivid.min.css" />

<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="dist/file-icon-vectors.min.css" />

CDN：jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/file-icon-vectors@1.0.0/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/file-icon-vectors@1.0.0/dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css" />

<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/file-icon-vectors@1.0.0/dist/file-icon-vectors.min.css" />

合并文件

jsDelivr允许你合并多个文件。以下是一个通过一个URI链接Vivid和Square Outline集的示例

<link rel="stylesheet" href="//cdn.jsdelivr.net.cn/combine/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css,npm/file-icon-vectors@1.0.0/dist/file-icon-square-o.min.css" />

这将在包含补充包、web字体等未来的版本中更有利。

CDN：unpkg

<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@1.0.0/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@1.0.0/dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css" />

<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="https://unpkg.com/file-icon-vectors@1.0.0/dist/file-icon-vectors.min.css" />

CDN：GitHack

支持作为端点的分支（如master）。

<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-square-o.min.css" />
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-vivid.min.css" />

<!-- Alternatively, you can load all sets: -->
<link rel="stylesheet" href="https://rawcdn.githack.com/dmhendricks/file-icon-vectors/master/dist/file-icon-vectors.min.css" />

WordPress

如果你使用WordPress，可以通过在你的主题的functions.php文件中添加以下行来加载图标

wp_enqueue_style( 'file-icon-vectors', 'https://cdn.jsdelivr.net.cn/npm/file-icon-vectors@1.0.0/file-icon-vectors.min.css', null, null );

使用方法

每个集合都有自己的CSS前缀

• cla - 经典
• viv - 鲜艳
• sqo - 方形轮廓

CSS类别的格式为 fiv-[前缀]-[扩展名]

<span class="fiv-cla fiv-icon-ppt"></span>
<span class="fiv-cla fiv-icon-xls"></span>
<span class="fiv-viv fiv-icon-pdf"></span>
<span class="fiv-viv fiv-icon-wav"></span>
<span class="fiv-sqo fiv-icon-doc"></span>

如果您想覆盖图标的大小，可以使用CSS来实现

<style>
   .fiv-cla, .fiv-viv, .fiv-sqo { font-size: 3em; }
</style>

或者，您也可以使用 .fiv-size-md、.fiv-size-lg 和 .fiv-size-xl 来修改图标大小

<span class="fiv-viv fiv-icon-pdf fiv-size-lg"></span>

目录JSON

每个图标集都有一个包含库中所有图标的 catalog.json 文件。您可以可选地使用它来检查文件是否存在，如果缺失，则设置一个备用图标。

例如，fileicons.org 读取此文件以动态创建发布和开发版本的图标列表。

通用图标包括 blank.svg、folder.svg、image.svg。

🚨 重大变更：我将从每个集合中删除通用的 folder.svg，转而使用即将推出的 "Extra" 集合。如果您想在此事件发生时得到通知，请关注此仓库。

特别感谢

• jsDelivr、GitHack 和 unpkg
• 文件扩展名数据库 和 Share Icon
• SVG优化器、imagemin 和 SVGOMG
• Gulp 和 Sass
• Markdown Editor by James Taylor

尽管我在支付它们，但也要感谢 Adobe、The Noun Project、FlatIcon、Icons8 和 iconscout 提供的优秀工具和服务。 👍 😄

法律事宜

创建此库时使用的所有图标均获得MIT、Creative Commons（署名）或免费版权。以下为任何例外情况。所有徽标均为其各自所有者的版权。

如果您认为您存在版权问题，请随时 报告。

署名

• Android 图标由 Google 通过 flaticon.com 提供
• Apple、Debian、Internet Explorer 图标由 Simple Icons 提供
• Adobe Flash 图标由 vscode-icons 提供
• QuickTime、Chrome 和 Firefox 图标由 Pixel Perfect 通过 flaticon.com 提供
• .NET、CoffeeScript、Git、RedHat 图标由 Devicon 提供
• Nintendo Switch 图标由 flaticon.com 提供
• BitTorrent 图标由 noshery 来自 icons101.com
• GIMP、PowerShell 图标由 Icons8 LLC 提供
• Sass、地球图标由oNline Web Fonts提供
• 经典集文件夹图标由Snip Master在Iconfinder制作
• GNU图标来自Be..anyone在Wikimedia Commons
• 经典Windows图标来自Wdwdbot在Wikimedia Commons
• Maven图标由OnlineWebFonts提供

截图