Skip to content

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

License

Notifications You must be signed in to change notification settings

mariojankovic/svg-icon-system-boilerplate

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

svg-icon-system-boilerplate

A boilerplate for building a custom icon system via a linked external SVG sprite. Configuration Options -- this system is based on SVG-sprite.

Usage

  1. Place SVG icons into svg/ folder (you can create subfolders within this, and the icons will be namespaced appropriately based on sublevel)
  2. Run gulp to build the sprite and a reference page (located at sprite/sprite.symbol.html)

sprite.svg is the main file containing a sprite of each SVG included using <symbol> inside of SVG <defs>. This system implements SVG icons via to access individual icons.

The icons are their original color by default (see your reference page) but can be edited using CSS. If you use subfolders, the naming structure is as follows: folderName--iconName.

HTML:

<svg>
  <use xlink:href="sprite.svg#glasses--wine"></use>
</svg>

You may then style this SVG in CSS. Make sure to give it a width and height (default is 100% of parent). It is best to edit these icons in CSS after adding a class to the <svg>. For example:

<svg class="icon--wineglass">
  <use xlink:href="sprite.svg#glasses--wine"></use>
</svg>

Sass:

.icon--wineglass {
  fill: red; // additional styling

  &:hover {
    fill: white; // styling on hover
  }
}

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 92.6%
  • JavaScript 7.4%