evil-icons

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

Subscribe to updates I use evil-icons


Statistics on evil-icons

Number of watchers on Github 4582
Number of open issues 26
Main language Ruby
Average time to merge a PR about 3 hours
Open pull requests 1+
Closed pull requests 10+
Last commit over 1 year ago
Repo Created about 4 years ago
Repo Last Updated 10 months ago
Size 26.9 MB
Homepage http://evil-icons.io
Organization / Authorevil-icons
Latest Releasev1.9.0
Contributors7
Page Updated
Do you use evil-icons? Leave a review!
View open issues (26)
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating evil-icons for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

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.

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 (5050), l (100100), xl (150150) and xxl (200200). 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
evil-icons open pull requests (View All Pulls)
  • make icon its own module
evil-icons questions on Stackoverflow (View All Questions)
  • Can't see SVGs (evil-icons) after packaging electron app
evil-icons list of languages used
evil-icons latest release notes
v1.9.0 v1.9.0
  • Updated Instagram icon. Thanks to @antiflasher.
v1.8.0
  • Added telegram icon
v1.7.8 v1.7.8
  • Added Pinterest icon
  • Updated Google Plus icon
Other projects in Ruby