<!-- This bit includes to the external SVG sprite sheet -->
[[[https://codepen.io/team/lincolnloop/pen/3f9e802caab1c386e6debc8544be0717]]]
<div class="page">
<div class="contain-icons">
<svg class="icon icon-heart"><use xlink:href="#icon-heart"></use></svg>
<svg class="icon icon-cloud"><use xlink:href="#icon-cloud"></use></svg>
<svg class="icon icon-star"><use xlink:href="#icon-star"></use></svg>
<svg class="icon icon-bulb"><use xlink:href="#icon-bulb"></use></svg>
</div>
<div class="contain-icons color-icons">
<!--Call on icons again, add different class to style separately-->
<svg class="icon icon-heart-2"><use xlink:href="#icon-heart"></use></svg>
<svg class="icon icon-cloud-2"><use xlink:href="#icon-cloud"></use></svg>
<svg class="icon icon-star-2"><use xlink:href="#icon-star"></use></svg>
<svg class="icon icon-bulb-2"><use xlink:href="#icon-bulb"></use></svg>
</div>
<button class="color-change">Change Theme</button>
</div>
@import "compass/css3";
body {
padding: 2.25em 1.6875em;
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
background-size: 3px 3px;
}
.page {
margin: auto;
text-align: center;
}
/* Width and height below ensures consistent sizing, which would be especially important if working with icons that had different viewBox dimensions */
.icon {
margin: 15px;
width: 100px;
height: 100px;
}
/* Style repeated icons. Depending on the icons you could be styling fills, strokes, or both */
.icon-heart-2 {
fill: #D85724;
/* You could also change the individual sizes here w/ width & height */
}
.icon-cloud-2 {
fill: #A75489;
}
.icon-star-2 {
fill: #3AA9FF;
}
.icon-bulb-2 {
fill: #00EF67;
}
// Color theme 2
.color-icons.change .icon-heart-2 {
fill: #14e2ba;
}
.color-icons.change .icon-cloud-2 {
fill: #1ca01c;
}
.color-icons.change .icon-star-2 {
fill: #aa0bb7;
}
.color-icons.change .icon-bulb-2 {
fill: #ed6f2f;
}
// Just button stuff
.color-change {
margin: 20px;
padding: 5px 10px;
background: transparent;
border: 4px solid #333333;
border-radius: 5px;
font-family: 'Droid Sans', sans-serif;
font-size: 20px;
color: #333333;
outline: none;
}
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
View Compiled
/*
Demo for a blog post:
https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/
Resources:
https://css-tricks.com/svg-sprites-use-better-icon-fonts/
https://css-tricks.com/svg-symbol-good-choice-icons/
http://svgpocketguide.com/book/
https://css-tricks.com/gotchas-on-getting-svg-into-production/
https://css-tricks.com/svg-fragment-identifiers-work/
*/
var button = document.getElementsByClassName('color-change');
button[0].addEventListener('click', function(evt) {
evt.preventDefault();
var icon = document.getElementsByClassName('color-icons')[0];
var className = icon.getAttribute('class');
if (className.indexOf('change') < 0) {
icon.setAttribute('class', 'color-icons change');
} else {
icon.setAttribute('class', ' color-icons');
}
});
This Pen doesn't use any external CSS resources.