Evil Icons
Evil Icons is a set of SVG icons designed extensively for using in modern web projects. You can use it as-is, or try a Ruby gem (for Ruby on Rails) or a npm package. See the icons here.
Made by Alexander Madyankin and Roman Shamin. Sponsored by Evil Martians.
Usage
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 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" %>
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/app/assets/stylesheets/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"});
Styling
Every icon has the .icon
class and its modifier including the icon name.
For example, the facebook icon has the .icon--ei-facebook
modifier.
In addition, 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
(50x50), , l
(100x100), xl
(150x150) and xxl
(200x200). You may want to add more sizes, we recommend to keep the sizes multiple to 50.
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-facebook {
fill: blue;
}
Roadmap
- Custom icons
- PSD/AI/Sketch for designers
- Grunt plugin
- Gulp plugin
- CDN version
- More styles