evil-icons v1.10.1
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.
Gulp
Use the Gulp plugin.
CDN
Just include the assets into your page from CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/evil-icons@1.9.0/assets/evil-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/evil-icons@1.9.0/assets/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.
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
7 years ago
7 years ago
8 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago