How to use Evil Icons with React?

Evil Icons provides a dedicated React component available via npm. Install it and use it in your components to render icons; refer to the linked React component repository in the README for setup and usage details.

Evil Icons vs Font Awesome: which is better for web projects?

Evil Icons is better for lightweight, automated integration with Ruby frameworks, while Font Awesome offers a larger icon library and broader framework support. Choose based on your project's stack and icon needs.

How to change the color of an Evil Icon?

You can change the icon color using CSS by targeting the .icon class or specific icon modifiers. For example, set 'fill: blue;' in your CSS, as demonstrated in the styling section of the README.

Does Evil Icons work with Vue.js?

Evil Icons does not have official Vue.js integration mentioned in the README. You might need to use the CDN or npm package with custom Vue components, which requires extra effort compared to native Vue icon libraries.

How to add custom sizes to Evil Icons?

The README recommends keeping sizes multiples of 25 for consistency. You can define custom sizes in CSS by overriding the icon dimensions, but it's best to use the helper's size parameter for predefined options to maintain scalability.

Is Evil Icons accessible for screen readers?

The README does not mention accessibility features like ARIA attributes. For better accessibility, you may need to add additional HTML attributes manually when embedding icons in your templates.

Open-Awesome

Evil icons

MITJavaScript1.10.1

A simple and clean SVG icon pack with seamless integration for Rails, Node.js, Gulp, Grunt, and CDN.

Visit Website GitHub

5.0k stars218 forks0 contributors

What is Evil icons?

Evil Icons is a free SVG icon pack designed for web projects, offering a simple 'plug and play' solution. It provides a set of clean, scalable icons that integrate seamlessly with various frameworks and tools like Rails, Node.js, Gulp, and Grunt. The project automates icon rendering, allowing developers to focus on using icons by name without managing SVG files manually.

Target Audience

Web developers and teams using Ruby on Rails, Sinatra, Middleman, Node.js, or build tools like Gulp and Grunt who need a lightweight, customizable icon set. It's also suitable for React developers via a dedicated component.

Value Proposition

Developers choose Evil Icons for its straightforward integration, framework-specific helpers, and automation—icons are easily added via CDN or packages without complex setup. Its SVG sprite system ensures performance and scalability across browsers.

Overview

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

Use Cases

Best For

Adding scalable SVG icons to Ruby on Rails applications
Integrating icons into Sinatra or Middleman projects
Using icons in Node.js-based frontend builds
Automating icon workflows with Gulp or Grunt tasks
Quickly prototyping with icons via CDN inclusion
Styling and sizing icons dynamically with CSS classes

Not Ideal For

Projects using Vue.js or Angular without official Evil Icons integrations
Applications requiring a vast icon library with thousands of options for diverse UI needs
Teams that prefer pure CSS icon solutions or icon fonts to completely avoid JavaScript dependencies

Pros & Cons

Pros

Framework-Specific Helpers

Includes dedicated helpers for Ruby on Rails, Sinatra, and Middleman, as shown in the README with code examples for easy icon rendering without manual SVG handling.

Performance-Optimized Sprites

Uses a single SVG sprite file for all icons, reducing HTTP requests and improving load times, which is highlighted in the features section.

CSS Customization

Icons can be sized with predefined options (S, M, L, XL, XXL) and colored via CSS, allowing for flexible styling directly in stylesheets.

Wide Browser Compatibility

Supports IE 9+ and all modern browsers, ensuring consistent display across different environments, as noted in the supported browsers section.

Cons

Limited Icon Variety

The roadmap admits that more styles are needed, indicating a smaller selection compared to comprehensive icon sets like Font Awesome or Material Icons.

Setup Complexity for Some Frameworks

For Sinatra, integration requires adding multiple gems and configuring asset pipelines, which can be tedious and error-prone, as detailed in the usage section.

JavaScript Dependency

The CDN and some integration methods rely on JavaScript for rendering, which might not align with projects aiming for minimal client-side JS or server-side rendering.

Frequently Asked Questions

Related Projects

Font Awesome

The iconic SVG, font, and CSS toolkit

Stars76,635

Forks12,205

Last commit3 months ago

Material design icons

Material Design icons by Google (Material Symbols)

Stars53,405

Forks9,729

Last commit3 days ago

Feather

Simply beautiful open-source icons

Stars25,931

Forks1,285

Last commit1 year ago

Heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.

Stars23,582

Forks1,316

Last commit27 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub