Design System

Svg Service Icons

How to Export SVG

BigNet Services

Additions
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/additions.svg

Bathroom Remodeling
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/bathroom_remodeling.svg

Kitchen Remodeling
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/kitchen_remodeling.svg

Windows
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/windows.svg

Doors
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/doors.svg

Gutters
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/gutter.svg

Roof Repair
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/roofrepair.svg

Siding
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/siding.svg

Basement & Crawlspace

Basement Waterproofing
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/basement_waterproofing.svg

Crawl Space
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/cs.svg

Egress Windows
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/egress_windows.svg

Flood Damage
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/flood_damage.svg

Mold
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/mold.svg

Radon
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/radon.svg

Sump Pump
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/sump_pump.svg

Total Basement Finishing
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/basement_finishing.svg

Dr. Energy Saver

Insulation
alt text 

https://dc69b531ebf7a086ce97-290115cc0d6de62a29c33db202ae565c.ssl.cf1.rackcdn.com/36/insulation-icon.svg

Foundation

Commercial Services
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/commercial_services.svg

Concrete Leveling
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/polylevel.svg

Concrete Repair
alt text

https://a80427d48f9b9f165d8d-c913073b3759fb31d6b728a919676eab.ssl.cf1.rackcdn.com/v3/templates/icons/concrete-repair-circle.svg

Foundation Supportworks
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/fsi.svg

Helical Piers
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/helical_piers_circle.svg

Pest Control

Pest Control
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/pest_control.svg

Bed Bugs
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/bedbugs.svg

Rodents
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/rodents.svg

Termites
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/termites.svg

Wasps
alt text 

http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/wasps.svg

Static PHP Example

<div class="medium-6 large-3 columns">
  <div class="srv-box">
    <a href="/basement-waterproofing.html" alt="Basement Waterproofing">
      <div>
         <?php echo file_get_contents("http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/basement_waterproofing.svg"); ?>
       </div>
       <h3>Basement Waterproofing</h3>
       <p>We have the most effective solutions for wet basements.</p>
    </a>
   </div>
 </div>

PHP Array Example

Update array from top of borders file

 $serCount = 3;
     $arr = array(

         array(
                 "service-img" => file_get_contents("http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/fsi.svg"),
                 "service-link" => "/foundation-repair.html",
                 "service-name" => "Foundation Repair",
                 "service-desc" => "We'll find the right solution for your foundation problems."
             ),
             array(
                 "service-img" => file_get_contents("http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/basement_waterproofing.svg"),
                 "service-link" => "/basement-waterproofing.html",
                 "service-name" => "Basement Waterproofing",
                 "service-desc" => "We have the most effective solutions for wet basements."
             ),
             array(
                 "service-img" => file_get_contents("http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/cs.svg"),
                 "service-link" => "/crawl-space-repair.html",
                 "service-name" => "Crawl Space Repair",
                 "service-desc" => "We offer complete crawl space encapsulation &amp; repair services."
             ),
             array(
                 "service-img" => file_get_contents("http://b388022801b3244fdbae-c913073b3759fb31d6b728a919676eab.r15.cf1.rackcdn.com/v3/templates/icons/sump_pumps.svg"),
                 "service-link" => "/sump-pump.html",
                 "service-name" => "Sump Pump Systems",
                 "service-desc" => "We install patented sump pump systems."
             )

);

Update PHP for loop from middle of borders file

 <?php
     $count = $serCount;
     for ($x = 0; $x <= $count; $x++) {
         echo '<div class="medium-6 large-3 columns">';
         echo '<div class="srv-box">';
         echo '<a href="'.$arr[$x]['service-link'].'" alt="'.$arr[$x]['service-name'].'">';
         echo '<div>'.$arr[$x]['service-img'].'</div>';
         echo '<h3>'.$arr[$x]['service-name'].'</h3>';
         echo '<p>'.$arr[$x]['service-desc'].'</p>';
         echo '</a>';
         echo '</div>';
         echo '</div>';
     }
     ?>

CSS Styles

Adjust colors
Add css styles to Screen CSS file

 /* SVG Adjust Colors */
.svg-service-icons {
   width: 100%;
   height: 150px;
}
.background {
 fill: #353535;
}
.foreground {
 fill: #fff;
}
.ring {
 fill: #D50208;
}