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.
Made by Alexander Madyankin and Roman Shamin.
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="https://cdn.jsdelivr.net/evil-icons/1.7.8/evil-icons.min.css">
<script src="https://cdn.jsdelivr.net/evil-icons/1.7.8/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
Middleman
Add the 'evil_icons'
gem to your Gemfile:
gem 'evil_icons'
Add the Evil Icons require to your main css file eg. `source/stylesheets/styles.css``:
/*
*= require evil-icons
*/
Add following to your config.rb
to register Evil Icons helpers:
require 'evil_icons'
helpers EvilIcons::Helpers
after_configuration do
sprockets.append_path(EvilIcons.assets_dir)
end
Next, you have to render evil-icons sprite in your layout similar to the Rails usage:
<%= evil_icons_sprite %>
And finally evil_icon
helper renders icons just like with the Rails:
<%= 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/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