Skip to content

Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN

License

Notifications You must be signed in to change notification settings

kongo23/evil-icons

 
 

Repository files navigation

Circle CI

Free ‘plug and play’ set of SVG icons designed specifically for web projects. Available as a Ruby gem, a Node.js package and Grunt/Gulp plugins. Just use icon names with your templates and styles — and all the rest will be done automagically.

evil-icons.io

Made by Alexander Madyankin and Roman Shamin.

Sponsored by Evil Martians

Usage

Supported browsers

We support IE 9+, Firefox, Chrome, Safari (desktop and mobile), Opera, Android 4+. http://caniuse.com/#search=inline%20svg

Grunt

Use the [Grunt plugin]. [Grunt plugin]: https://github.com/outpunk/grunt-evil-icons

Gulp

Use the [Gulp plugin]. [Gulp plugin]: https://github.com/outpunk/gulp-evil-icons

CDN

Just include the assets into your page from CDN:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/evil-icons/1.7.2/evil-icons.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/evil-icons/1.7.2/evil-icons.min.js"></script>

or

<link rel="stylesheet" href="//cdn.jsdelivr.net/evil-icons/1.7.2/evil-icons.min.css">
<script src="//cdn.jsdelivr.net/evil-icons/1.7.2/evil-icons.min.js"></script>

And use the icons like this:

<div data-icon="ei-archive"></div>
<div data-icon="ei-chart" data-size="s"></div>
<div data-icon="ei-check" data-size="m"></div>
<div data-icon="ei-spinner" data-size="m"></div>
<div data-icon="ei-cart" data-size="l" class="foo"></div>

Rails

Add the 'evil_icons' gem to your Gemfile:

gem 'evil_icons'

Add the Evil Icons require to your application.css:

/*
 *= require evil-icons
 */

Next, you have to render the evil-icons sprite in your template (or, in your layout):

<%= evil_icons_sprite %>

Finally, you can render the icon using the evil_icon helper. Here are some examples:

<%= evil_icon 'ei-search' %>
<%= evil_icon 'ei-arrow-right', size: :m %>
<%= evil_icon 'ei-envelope', size: :l, class: "custom-class" %>

Sinatra

Add the 'evil_icons' gem to your Gemfile:

gem 'evil_icons'

And require it:

require 'evil_icons'

Add the helpers to your application:

helpers EvilIcons::Helpers

Next, you have to render the evil-icons sprite in your template (or, in your layout):

<%= evil_icons_sprite %>

Finally, you can render the icon using the evil_icon helper. Here are some examples:

<%= evil_icon 'ei-search' %>
<%= evil_icon 'ei-arrow-right', size: :m %>
<%= evil_icon 'ei-envelope', size: :l, class: "custom-class" %>

In order to use the stylesheets, you have to add Sprockets to your application. Add sinatra-asset-pipeline to your Gemfile:

gem 'sinatra-asset-pipeline'

And register it:

require 'sinatra/asset_pipeline'
register Sinatra::AssetPipeline

Finally, add the Evil Icons require to your application.css:

/*
 *= require evil-icons
 */

Also, you can take a look at [example app] by [@aderyabin]. [example app]: https://github.com/aderyabin/evil_icons_sinatra_example/ [@aderyabin]: https://github.com/aderyabin

npm

Add the 'evil-icons' package to your project:

npm install evil-icons

Add the Evil Icons styles to your pages:

<link rel="stylesheet" type="text/css" href="./node_modules/evil-icons/assets/evil-icons.css">

Require evil-icons in your JavaScript code:

var icons = require("evil-icons")

Finally, you can render the icons in your page using helpers. Here are some examples:

/* A string with SVG sprite */
icons.sprite;

/* Icons rendering */
icons.icon("ei-search");
icons.icon("ei-arrow-right", {size: "m"});
icons.icon("ei-envelope", {size: "l", class: "custom-class"});

React

Use the React component.

Styling

Every icon has the .icon class and its modifier including the icon name. For example, the Facebook icon has the .icon--ei-sc-facebook modifier.

Also, an icon may have a size modifier. But we do recommend to change the size using helper's size parameter instead. Evil Icons have some predefined sizes: s (25x25, default), m (50×50), l (100×100), xl (150×150) and xxl (200×200). You may want to add more sizes, we recommend keeping the sizes multiple to 25.

icons.icon("ei-arrow-right", {size: "m"})

Also, you may want to add a custom class for an icon. You can do this using the class parameter:

icons.icon("ei-envelope", {class: "custom-class"})

An icon's color can be changed in CSS:

.icon {
  fill: green;
}
.icon--ei-sc-facebook {
  fill: blue;
}

Roadmap

  • Custom icons
  • More styles

About

Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Ruby 40.2%
  • JavaScript 38.0%
  • HTML 12.0%
  • CSS 9.8%