Varkala

SVG Icons Sprite generated by Orion Icon Library

Let's use your SVG Sprite!

Congratulations, your SVG Sprite from Varkala Collection from Orion Icon Library was created successfully!
In the downloaded folder, you will find the file called orion-svg-sprite.svg which contains your SVG Sprite [Open]. Please find below different techniques on how to use your Icons in your Web Project.


‹a› Inline SVG Sprite

The first technique consists in including the content of the orion-svg-sprite.svg in your HTML like in the example below:

<body>
  <svg width="0" height="0" class="hidden" style="display:none">
    <symbol id="myIcon-1">
      <path d="..."></path>
      <path d="..." stroke="..."></path>
    </symbol>
    <symbol id="myIcon-2">
      <circle rx="..."></circle>
      <path d="..."></path>
    </symbol>
    <symbol>...</symbol>
  </svg>
  <section>Here we will call the Icons references to show them!</section>
</body>

Then you can call whenever you want any of the SVG Icons from the sprite, referencing them with the <use> element, like:

<body>
  <svg width="0" height="0" class="hidden" style="display:none">The SVG Sprite</svg>
  <section>
    <svg>
      <use xlink:href="#myIcon-1"></use>
    </svg>
    <svg>
      <use xlink:href="#myIcon-2"></use>
    </svg>
  </section>
</body>

Pros: Easy to implement, cross-browser support, unique HTTP request.
Cons: Adds extra markup in the HTML document, SVG Sprite cannot be cached.
Tips: Put the SVG Sprite markup before calling them ( bugin Safari).

‹b› SVG Sprite in an external file

The second technique consists in referencing the Icons from the SVG sprite as an external file. This allows to display different parts of the SVG Sprite by specifying the fragment identifier at the end of the URL.

In the HTML markup you include your Icons using <use> to reference the orion-svg-sprite.svg file with the specific #fragment ID of each Icon you need. Below an example:

<body>
  <section>
    <svg>
      <use xlink:href="orion-svg-sprite.svg#myIcon-1"></use>
    </svg>
    <svg>
      <use xlink:href="orion-svg-sprite.svg#myIcon-2"></use>
    </svg>
  </section>
</body>

Pros: Less cluttered markup. External file is cachable, which helps with page load speed.
Cons: The browser support is good except for older Internet Explorer versions (IE<9).
Tips: In case you need to support IE older versions, you can use the great svg4everybody plugin.

➜ Icons Reference

Use one of the techniques described before to call the SVG Sprite.
Then select the Icons you need below to easily copy the <use> reference and paste it in your Project.

Hint Select the technique you want to use with the switch button.
The use code reference will update with the correct url below the icons

Plus You can set a specific size for your Icons instances.
This is useful if you need a fixed size and will not style with css.

❧ CSS Styles and Variables

You selected the options to generate the SVG Sprite with external color cssclasses.
That means that Orion detected if your icons had different color layers and created a class and stylesheet for you to edit the icons color properties.
Try me! The color classes below are editable. Make your changes in real time and paste it directly into your project.

Support: Since our Icons can have several Layers, this technique take advantage of the CSS Custom Properties.
This has a good browser support except for older IE versions. In those browsers the original color will be used as a fallback.

You can find a lot of information on the Internet about SVG.
We made a little selection for you if you want to learn more.