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

Go to file

Daniel Hendricks 0e39cd1c33 Added unpkg CDN docs #3		2018-06-12 09:13:42 -05:00
demo	Moved css to ./dist; added uglifycss	2018-01-28 20:44:11 -06:00
dist	Removed Distinct icon	2018-06-12 06:02:43 -05:00
src/scss	Moved css to ./dist; added uglifycss	2018-01-28 20:44:11 -06:00
.gitignore	Hide icon sets in progress	2018-06-12 06:03:43 -05:00
bower.json	Added gulpfile.js to Bower ignore list	2018-01-28 20:52:13 -06:00
composer.json	Removed version	2018-01-28 15:40:19 -06:00
gulpfile.js	Adding package.json, gulpfile.js	2018-01-28 20:40:17 -06:00
LICENSE	Updated license	2017-09-16 00:26:09 -05:00
package.json	Added description to package.json	2018-06-12 08:58:11 -05:00
README.md	Added unpkg CDN docs #3	2018-06-12 09:13:42 -05:00
screenshot.png	Added screenshot	2018-06-12 07:48:15 -05:00

README.md

File Vector Icons

A collection of file type SVG icons, licensed MIT and available for free use for your applications.

If you have feedback, bugs or requests, please feel free to post them.
I pay to license many of the icons used in these sets. Donations are appreciated.

Icon Sets

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

Classic - An expansion of the Redboot free-file-icons designs.
Vivid - Inspired by Erlen Masson

Demo: View Icon Sets 👀

Installation

NPM

npm install file-icon-vectors

Bower

bower install file-icon-vectors

Composer

composer require dmhendricks/file-icon-vectors

Usage

To display a file icon, simply link to one or both 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-vivid.min.css" />

Alternatively, you can link to a CDN:

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

From there, you can use CSS classes to display the icons:

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

Notice that the classes contain either flv-cla for the Classic set or flv-viv for the Vivid set.

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

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

If you prefer, 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>

TODO

Fix inconsistent sizing in classic set
Add CDN instructions
Add additional library sets

Legal Stuff

All icons used in the creation of this library were licensed MIT or purchased royalty-free, with exceptions noted below.

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

Attribution

Android icon made by Google via flaticon.com
BitTorrent icon made by noshery from icons101.com
GIMP Icon provided by Icons8 LLC
Vivid set Folder Icon made by Snip Master from Iconfinder