Svg Icon System Boilerplate

screenshot of Svg Icon System Boilerplate

A boilerplate for building a custom icon system via a linked external SVG sprite

Overview:

svg-icon-system-boilerplate is a boilerplate that allows users to build a custom icon system using an external SVG sprite. It offers configuration options and is based on SVG-sprite.

Features:

  • Easy integration of custom icon system
  • Supports subfolders for organizing icons
  • Generates a reference page for easy access to icons

HTML Usage:

To style the SVG icons in CSS, follow these steps:

  1. Add a class to the <svg> element.
  2. Edit the SVG icon by targeting the class in CSS. Make sure to specify the width and height of the icon (default is 100% of parent).

Example (Sass):

.my-icon-class {
  // CSS styling for the icon goes here
}

Summary:

svg-icon-system-boilerplate is a useful tool for creating a custom icon system using an external SVG sprite. It provides an easy way to organize and access icons, and allows for customization using CSS. With straightforward installation instructions, users can quickly set up their own icon system and start using it in their projects.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.