Skip to content

🎯 All the filetype icons you need in supersharp SVG format! Cannot find the icon set it's for you? With this scss loop you can generate all the icons you need quickly and how you like it

License

Notifications You must be signed in to change notification settings

erikyo/mime-icon-generator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mime-icon-generator Build Status devDependencies Status

DEMO: https://erikyo.github.io/mime-icon-generator/

alt text

Create easily all the icons you need in supersharp SVG format!

Configuration is very fast ... in the $icon-list array you have to enter some parameters like file extension, color (if you want a custom tone), and shape... icons will be automatically generated and you recall them easily in your site or in your app using the class .mime-icon.ico-$fileextension.

All svg icons are merged into a single css sheet and this allows for a very lightweight file: ~450 icon gzipped size is only 13kb! less than one 256x256 png icon.


INSTALLATION

git clone https://github.com/erikyo/mime-icon-generator.git && cd mime-icon-generator && npm install

gulp watch - sass watch (witj sourcemap and autoprefixer)

gulp finalize - (default) like gulp watch but the generated files are moved to the dist folder. a gzipped version of the minified one is also created)


USAGE

1. Default mixin

There are two ways to make a way to make an icon... the first is with the mixin.

Its basic form is this "@include do-icon(**$color**)".

You can specify a color that will be assigned to the icon if no the default color is used (in the Config Section of the scss sheet)

.ico-myico .ico:after {
      @include do-icon($color);
}

You can recall your newly generated icon whit this code

<div class="mime-icon">
  <div class="ico-myico"></div>
</div>

2. Mass generated icons with icon font

But to generate many icons at once? I prepared a @for loop that loops all the items in the $icon-list:

$icon-list:
...
(abc,  "", $music),
...;

Versions

  • 0.9.0 - Initial test release
  • 0.9.1 - Style fixes
  • 0.9.2 - Style fixes
  • 1.0.0 - First release. Fix colors into nested svg and come with some updates (like gulp v4)

Utilities - google sheet docs (can be useful to mass generate your icons)

https://docs.google.com/spreadsheets/d/15Xg_7qReclvRpHDXnVL2go9T-QntLAZJj58KdY4YURU/edit?usp=sharing

About

🎯 All the filetype icons you need in supersharp SVG format! Cannot find the icon set it's for you? With this scss loop you can generate all the icons you need quickly and how you like it

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages