csvg-icons v1.0.0-alpha.1

CSVG Icons

Mix and match SVG icons from among 87,534 icons and 93 icon packages.

Features

• Include only the icons you need Custom icon bundles means smaller transfer sizes and faster page loading
• Use icons from multiple packages Adding icons from another icon package doesn't require including entire packages
• SVG in CSS Eliminating font files means fewer server requests and faster page loading
• No font files One less server request before your pages load and eliminates "Ensure text remains visible during webfont load" warning on PageSpeed Insights
• Seamless integration with SCSS workflow No additional software to install or configure

Usage

example.scss

// $cssvg_prefix: 'cs'; // optionally define the class prefix. defaults to 'cs'
@import "csvg-icons/csvg.scss"; // import default variables, mixins and core styles
@import "csvg-icons/icons/fa.scss"; // import the FontAwesome4 collection
@include csvgIcon($icons-fa,'search'); // include the 'search' icon from the FontAwesome4 collection

example.html

<i class="cs cs-search"></i>

Styling

Normally, you can't apply custom styles to embedded SVG images. CSVG gets around this limitation by embedding SVG images with mask-image. With this approach, you can apply color, color gradients and other custom styling to CSV images via the background property.

<i class="cs-search" style="background:blue"></i>

Available Icon Packages

Icon definitions from Iconfy