octoleo/file-icon-vectors
1
1
Fork 0
mirror of https://github.com/namibia/file-icon-vectors.git synced 2024-11-15 17:07:06 +00:00
Code Issues Releases Activity
126 Commits 3 Branches 3 Tags 3.2 MiB
SCSS 97.3%
JavaScript 2.7%
07014d8aca
Go to file
Daniel Hendricks 07014d8aca Minor readability edits to README.md
2018-06-12 10:58:36 -05:00
demo Modified demo to use CDN 2018-06-12 10:09:24 -05:00
dist Prep for 0.8.1 2018-06-12 09:27:02 -05:00
src/scss Prep for 0.8.1 2018-06-12 09:27:02 -05:00
.gitignore Added .log files to ignore list 2018-06-12 10:35:19 -05:00
bower.json Prep for 0.8.1 2018-06-12 09:27:02 -05: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 Prep for 0.8.1 2018-06-12 09:27:02 -05:00
README.md Minor readability edits to README.md 2018-06-12 10:58:36 -05:00
screenshot.png Added screenshot 2018-06-12 07:48:15 -05:00

README.md

Author Release License GitHub Downloads NPM Donate Twitter

File Vector Icons

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

  • Please post feedback or issues.
  • I pay to license many 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 this library to create something cool, tell me about it!

Icon Sets

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

📌 Demo: View Icon Sets

Installation

NPM

npm install file-icon-vectors

Bower

bower install file-icon-vectors

Composer

composer require dmhendricks/file-icon-vectors

Linking Stylesheets

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

CDN: unpkg

Recommended for performance.

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

CDN: jsDelivr

Supports both HTTP and HTTPS.

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/file-icon-vectors/dist/file-icon-classic.min.css" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/file-icon-vectors/dist/file-icon-vivid.min.css" />

CDN: RawGit

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

Example Usage

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 additional library sets
  • Improve Gulp automation tasks

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

Screenshot - Vivid Collection

Vivid Icon Collection