Upgrade SVGs + SVG Sprites

Are you currently using SVG sprites or SVGs and are ready to move to Version 7? This is what you need to do.

Upgrading your SVGs or SVG Sprites to Version 7 can be as simple as swapping out the Version 6 files and replacing them with the Version 7 files, but there are a few things to know before you jump in.

Now with Version 7, there are now two options for using SVGs, whether as sprites or as bare SVGs:

Format	Folder	What’s the difference?	Impact on Rendering
Cropped	/sprites	SVG viewbox width and height are cropped to the edges of the interior symbol.	Icons will only take up as much space as their dimensions need.
Full	/sprites-full	SVG viewbox width and height are set to a standard square based on the Icon Canvas	Icons will be rendered at a consistent width with surrounding whitespace.

When you upgrade your SVG Sprites or bare SVGs, you’ll get to choose which format you prefer. If you choose to switch over to the “full” format when you upgrade to Version 7, you may need to adjust the sizing of your icon to account for the whitespace, and remove any custom styling you may have added to align or pad icons depending on their shape.

Upgrading SVG Sprites

Swap Out the Version 6 Files for Version 7 Files

The Version 6 sprite files are equivalent to Version 7’s “cropped” sprite files. If you upgrade with these files, your upgrade is as simple as swapping out the Version 6 sprite file for any styles you’re using, and replacing it with the Version 7 “cropped” sprite file for that style.

Here’s an example of upgrading a couple “cropped” sprite icons to Version 7 in the Sharp Solid and a Sharp Thin styles:

<ul>
  <li>
    <!-- upgrading a Sharp Solid style icon -->
    <svg>
      <use href="/your_path_to_version_7_files/sprites/sharp-solid.svg#saxophone-fire"></use>
    </svg>
  </li>
  <li>
    <!-- upgrading a Sharp Thin style icon -->
    <svg>
      <use href="/your_path_to_version_7_files/sprites/sharp-thin.svg#trumpet"></use>
    </svg>
  </li>
</ul>

If you choose to switch over to the “full” sprites when you upgrade to Version 7, be sure to check whether your icons need to be resized to account for the additional whitespace and adjust any custom styling you may have added to align or pad icons depending on their shape.

Here’s an example of upgrading a couple “full” sprite icons to Version 7 in the Sharp Solid and a Sharp Thin styles:

<ul>
  <li>
    <!-- upgrading a Sharp Solid style icon to a full sprite -->
    <svg>
      <use href="/your_path_to_version_7_files/sprites-full/sharp-solid.svg#saxophone-fire"></use>
    </svg>
  </li>
  <li>
    <!-- upgrading a Sharp Thin style icon to a full sprite -->
    <svg>
      <use href="/your_path_to_version_7_files/sprites-full/sharp-thin.svg#trumpet"></use>
    </svg>
  </li>
</ul>

Check Any Changed Names

In Version 7, we changed the name of a few icons so you’ll need to check if the name changed for any icons you’re using. If so, you’ll need to update that name in your code. Here’s an example of what that change might look like:

Version 6 Usage	Version 7 Usage
<use href="solid.svg#vector-square"></use>	<use href="solid.svg#draw-square"></use>

Currently there is no easy upgrade option for icons with name changes in SVG sprites. Each usage where an icon name is changed will need to be updated.

Upgrading Bare SVGs

Similar to SVG Sprites, with Version 7, there are now two options for using bare SVGs:

• If you replace your Version 6 SVGs with the “cropped” files, the icons will swap seamlessly.
• If you choose to switch over to the “full” sprites when you upgrade to Version 7, be sure to check whether your icons need to be resized to account for the additional whitespace and adjust any custom styling you may have added to align or pad icons depending on their shape.

Then for each bare SVG icon you placed in your project, copy the SVG code from the Version 7 download files and replace your Version 6 code with the new code.

Here’s an example updating the SVG code in the project:

This icon is updated. It’s somewhere.

<div class="time-to-get-ill">
  <style>
    .icon {
      width: 1.5em;
      height: 1.5em;
      display: inline-block;
      vertical-align: -.125em;
    }
  </style>
    <p><strong>This icon is updated. It's
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 640 640"><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM344 184L344 312.7L404 402.7C411.4 413.7 408.4 428.6 397.3 436C386.2 443.4 371.4 440.4 364 429.3L300 333.3C297.4 329.4 296 324.7 296 320L296 184C296 170.7 306.7 160 320 160C333.3 160 344 170.7 344 184z"/></svg>
    somewhere.
    </strong></p>
</div>

There is no easy upgrade option for icons placed as SVGs - the code for each SVG icon will need to be updated.