Mime Icon Generator

MIME ICONS

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.

Source on github: https://github.com/erikyo/mime-icon-generator

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>

File extension option

This mixin has a bit of options: the second one is to insert a file extension (directly inside svg)...
to do this you have to add @include do-icon($color, "", $file-extension); to the mixin

@include do-icon($color, "", "ABC" );

Variations

But that's not all! Icons can be generated with various color schemes to decide what to use in the scss file in the configuration section to select which color scheme to use between this possible values: default || Dark || Light || double

$style: "default"; // default || dark || light || double

Alternatively you can use the mixin at the bottom of the scss file in the Hardcoded section that allows you to use the custom style by adding the corresponding class to the variation of the theme you chose

Default icons

Light icons

Dark icons

Double icons

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

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

The first argument used for the class (in the example will be .mime-ico.ico-application and .mime-ico.ico-abc). it's also used for the filetype displayed in the icon
The second argument is optional: it is the color of the icon if it is not passed (or is not a color) will be used a color from the array called $icon-colors
The third argument is the icon ascii. You can pass one of the variables of "scss/generator-vars.scss" https://github.com/erikyo/mime-icon-generator/blob/master/scss/generator-vars.scss. Remember to load the font fonts you like and edit this set of variables that will be very convenient to you in "scss/fonts.scss"