Proof of Concept

Light up your icons

You love CSS. So does Iconic. Each icon is designed with stying in mind. Individual elements of each and every icon can be given a completely custom look. So, by all means, go crazy.

Hover to show alternate styling

HTML
<img src="lightbulb.svg" class="svg-inject" />
JS
$('.svg-inject').svgInject();
CSS
.iconic-lightbulb {
  cursor: pointer;
}

.iconic-lightbulb * {
  -webkit-transition: .4s;
  -moz-transition: .4s;
  transition: .4s;
}

.iconic-lightbulb .icon-container {
  fill: #fff;
  stroke-width: 6;
  stroke: #fff;

  -webkit-transition: .3s;
  -moz-transition: .3s;
  transition: .3s;
}

.iconic-lightbulb:hover .icon-container {
  fill: #fff8db;

  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transition: 2s;
}

.iconic-lightbulb .iconic-lightbulb-light * {
  stroke-width: 16;
  stroke: #ddd;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iconic-lightbulb:hover .iconic-lightbulb-light * {
  stroke: #fc0;
  stroke-width: 32;
}

.iconic-lightbulb .iconic-lightbulb-base {
  fill: #666;
}

.iconic-lightbulb .iconic-lightbulb-screws * {
  fill: none;
  stroke-width: 16;
  stroke: #333;
  stroke-linecap: round;
  stroke-linejoin: round;
}
SVG (from lightbulb.svg)
<svg version="1.1" class="iconic iconic-lightbulb" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="714px" height="714px" viewBox="0 0 714 714" style="enable-background:new 0 0 714 714;" xml:space="preserve">
  <circle class="icon-container" cx="357" cy="357" r="330" stroke-width="16" stroke="#000" fill="none" />
  <g class="iconic-lightbulb-screws">
      <defs>
          <clipPath id="iconic-lightbulb-screws-clip">
              <polygon points="304.333,511 433.667,511 430,521.5 281.667,547.167 280.333,521.5"/>
          </clipPath>
      </defs>
      <line clip-path="url(#iconic-lightbulb-screws-clip)" x1="430" y1="505" x2="302" y2="529"/>
      <line class="st4" x1="430" y1="537" x2="302" y2="561"/>
      <line class="st4" x1="430" y1="569" x2="302" y2="593"/>
      <line class="st4" x1="410" y1="605" x2="322" y2="621"/>
  </g>

  <g class="iconic-lightbulb-light">
      <defs>
          <clipPath id="iconic-lightbulb-light-clip">
              <polygon points="514,329 436,369 436,436 299,436 293,360 489,280"/>
          </clipPath>
      </defs>
      <g clip-path="url(#iconic-lightbulb-light-clip)">
          <line x1="330" y1="369" x2="330" y2="435"/>
          <polyline points="478,313 402,349 402,435"/>
      </g>
      <line x1="478" y1="129" x2="254" y2="233"/>
      <line x1="354" y1="125" x2="254" y2="173"/>
      <line x1="478" y1="189" x2="254" y2="293"/>
      <line x1="478" y1="249" x2="254" y2="353"/>
  </g>

  <path class="iconic-lightbulb-base" d="M292.431,505c0.863,4.314,5.169,7.845,9.569,7.845h128c4.4,0,8.706-3.53,9.569-7.845l12.861-64.311c0.863-4.314-2.03-7.845-6.431-7.845H286c-4.4,0-7.294,3.53-6.431,7.845L292.431,505z"/>
</svg>