octoleo
/
file-icon-vectors
mirror of https://github.com/namibia/file-icon-vectors.git
1
1
Fork 0
Code Issues Releases Activity
360 Commits 3 Branches 3 Tags 3.2 MiB
SCSS 97.3%
JavaScript 2.7%
Go to file
Daniel Hendricks c584c00f87 Ignore markdown files from npm, Bower 2018-09-24 14:11:00 -05:00
dist [HC] New Word icons 2018-09-24 13:09:15 -05:00
src [HC] Refactored Word, Powerpoint, Works, Xcode icons 2018-09-24 12:59:30 -05:00
.gitignore Updated .gitignore 2018-09-20 19:04:33 -05:00
.npmignore Ignore markdown files from npm, Bower 2018-09-24 14:11:00 -05:00
CHANGELOG.md Added change log 2018-09-24 14:07:44 -05:00
LICENSE Updated license 2017-09-16 00:26:09 -05:00
README.md Updated .gitignore 2018-09-20 19:04:33 -05:00
bower.json Ignore markdown files from npm, Bower 2018-09-24 14:11:00 -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
package.json 1.0.0 2018-08-05 15:31:44 -05:00

README.md

Author Icon Count Release License GitHub Downloads NPM NPM Downloads Twitter

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:

Installation

NPM

npm install file-icon-vectors

Bower

bower install file-icon-vectors

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

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.

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

Special Thanks

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

Analytics

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

Screenshot

Icon Samples