octoleo/file-icon-vectors
1
1
Fork 0
mirror of https://github.com/namibia/file-icon-vectors.git synced 2024-12-26 01:17:29 +00:00
Code Issues Releases Activity
112 Commits 3 Branches 3 Tags 3.2 MiB
SCSS 97.3%
JavaScript 2.7%
1a6ebde103
Go to file
Daniel Hendricks 1a6ebde103 Added screenshot
2018-06-12 07:48:15 -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 Adding package.json, gulpfile.js 2018-01-28 20:40:17 -06:00
README.md Fixed license badge 2018-06-12 06:00:03 -05:00
screenshot.png Added screenshot 2018-06-12 07:48:15 -05:00

README.md

Author Release License Total Downloads Bower Donate Twitter

File Vector Icons

A collection of file type SVG icons.

Icon Sets

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

Demo: View Icon Sets

Installation

To install with Bower:

bower install file-icon-vectors

To install with 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" />

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
  • Publish to NPM
  • Add additional libraries, such as square icons, et al

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