mirror of https://github.com/namibia/file-icon-vectors.git synced 2024-12-25 00:45:59 +00:00

Go to file

Daniel Hendricks e36e7a861f [HC] Added Haskell, font icons; modified MM, JS, HTM, CSS		2018-10-21 09:59:48 -05:00
dist	[HC] Added Haskell, font icons; modified MM, JS, HTM, CSS	2018-10-21 09:59:48 -05:00
src	[HC] Added Haskell, font icons; modified MM, JS, HTM, CSS	2018-10-21 09:59:48 -05:00
.gitignore	Renamed template directory	2018-09-28 22:45:15 -05:00
.npmignore	Ignore markdown files from npm, Bower	2018-09-24 14:11:00 -05:00
bower.json	Ignore markdown files from npm, Bower	2018-09-24 14:11:00 -05:00
CHANGELOG.md	[EXT] Renamed blue folders, added neon	2018-09-26 00:20:49 -05:00
composer.json	Removed version	2018-01-28 15:40:19 -06:00
gulpfile.js	Prep for 1.0 release	2018-08-05 15:19:58 -05:00
LICENSE	Updated license	2017-09-16 00:26:09 -05:00
package.json	Fixed syntax error	2018-09-28 22:42:44 -05:00
README.md	Tweaked colors, added attribution for GNU icon	2018-10-20 23:44:35 -05:00

README.md

File Icon Images

A collection of file type/extension SVG icons, available free for use in your applications.

Please post feedback or issues.
I pay to license several of the icons used in these sets. Donations are appreciated.
💡 If you have an idea, such as new icon requests, additional collections/designs, and/or are willing to contribute a library/design, please let me know! My time is limited, but I will get to it eventually.
⭐ If you use these icons to create something cool, tell me about it!

📌 Demo: View Icons

Icon Sets

Currently, there are three icon sets in the dist/icons directory:

Classic - An expansion of the Redboot free-file-icons designs.
Vivid - Inspired by Erlen Masson
Square Outline (in progress) - Modified from and inspired by Cotne Nazarashvili

Installation

NPM

npm install file-icon-vectors

Bower

bower install file-icon-vectors

NB! Due to a versioning issue, the current release is not available from Bower. It will be corrected with the next release.

Composer

composer require dmhendricks/file-icon-vectors

Quick Start

To display a file icon, simply link to one or all of the icon set CSS files in the css directory:

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

Combining Files

jsDelivr allows you to combine multiple files. Below is an example of linking both the Vivid and Square Outline sets with one URI:

<link rel="stylesheet" href="//cdn.jsdelivr.net/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" />

This will become more beneficial with future releases that contain supplementary packs, web fonts, etc.

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

Supports branches as endpoints (such as 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

If you're using WordPress, you can load the icons by adding the following line to your theme's functions.php file:

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

Usage

Each set has its own CSS prefix:

cla - Classic
viv - Vivid
sqo - Square Outline

The format for CSS classes is fiv-[prefix]-[extension]:

<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>

If you want to override the size of the icons, you can do so with CSS:

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

Alternatively, you may also use .fiv-size-md, .fiv-size-lg and .fiv-size-xl to modify the icon sizes:

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

Catalog JSON

Each icon set has a catalog.json file that includes all icons included in the library. You can optionally use this to check for files that exist, and where missing, set an alternate icon.

For example, fileicons.org reads this file to dynamically create the icon lists for both release and development versions.

Generic icons include blank.svg, folder.svg, image.svg.

Special Thanks

jsDelivr, GitHack, and unpkg
The File Extensions Database and Share Icon
SVG Optimizer, imagemin and SVGOMG
Gulp and Sass
Markdown Editor by James Taylor

Even though I'm paying for them, thanks also to Adobe, The Noun Project, FlatIcon, Icons8 and iconscout for providing great tools and services. 👍 😄

Legal Stuff

All icons used in the creation of this library were licensed MIT, Creative Commons (attribution) or purchased royalty-free. Any exceptions noted below. All logos are copyright their respective owners.

If you feel that you have a copyright issue, please feel free to report it.

Attribution

Android icon provided by Google via flaticon.com
Apple, Debian, Internet Explorer icons provided by Simple Icons
Adobe Flash icon provided by vscode-icons
QuickTime, Chrome and Firefox icons provided by Pixel Perfect via flaticon.com
.NET, CoffeeScript, Git, RedHat icons provided by Devicon
Nintendo Switch icon provided by flaticon.com
BitTorrent icon provided by noshery from icons101.com
GIMP, PowerShell icons provided by Icons8 LLC
Sass, Globe icons provided by oNline Web Fonts
Classic set Folder Icon made by Snip Master from Iconfinder
GNU icon from Be..anyone at Wikimedia Commons
Classic Windows icon from Wdwdbot at Wikimedia Commons
Maven icon provided by OnlineWebFonts