SVG Icons

SVG Icons

SVG icons are defined through the all website. They appears on

• on the list of pages triggered by the shortcode [list_pages] (more info here)

Define a SVG Icon on a page

On each page you can define which icon will be related to. To do so:

• Open the page editor
• On the bottom look for the field « Other options (optional)
• Write down an SVG icon id (see below)

Finding new SVG Icon

Go to https://www.flaticon.com/

1. Search your icon in the search field
2. Click on the one you like
3. Download the SVG version.

Note : if it ask you what color you want, let it black. The wordpress theme will colorize it anyway.

Add a new SVG Icon

Click on Options in the administration’s menu.

Go to the Icon SVG tab

The icon are displayed in a table. Each icon is defined by:

1. an ID : the ID is unique.
2. a Viewbox : a series of number which define the proportion and the size of the icon in its original size.
3. a code : the code inside the svg tag.

Step 1 : choose a unique ID

The ID is used to load and identify the icon through all the website. The ID:

• is unique, different from those already defined.
• is written in lowercase
• can’t have any space or special character (accentued character or symbol)
• can have a dash or an underscore

Step 2 : get the viewbox attribute

Open your SVG file in a text editor (notepad for example). Look at the beginning of the code, in the <svg> tag, you will find an attribute Viewbox. Inside the viewbox, we find what we look for : a series of four number. Copy-paste them.

Example :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="92px" height="92px" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve">
<path id="XMLID_84_" d="M82,18H10c-2.2,0-4-1.8-4-4s1.8-4,4-4h72c2.2,0,4,1.8,4,4S84.2,18,82,18z M86,35.4c0-2.2-1.8-4-4-4H10
c-2.2,0-4,1.8-4,4s1.8,4,4,4h72C84.2,39.4,86,37.6,86,35.4z M86,56.7c0-2.2-1.8-4-4-4H10c-2.2,0-4,1.8-4,4s1.8,4,4,4h72
C84.2,60.7,86,58.9,86,56.7z M50,78c0-2.2-1.8-4-4-4H10.3c-2.2,0-4,1.8-4,4s1.8,4,4,4H46C48.2,82,50,80.2,50,78z"/>
</svg>

In this example, you copy-paste the 0 0 92 92 into the field Viewbox.

Step 3 : get the code

You should not copy-paste all the code of your svg file !

Open your SVG file in a text editor (notepad for example). Select the code between the <svg …. > and the </svg> tag, and copy-paste it.

Note : the <svg> tag can be very long due to all its attributes. Look carefully where it ends (where is the ‘>’ symbol)

Example :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="92px" height="92px" viewBox="0 0 92 92" enable-background="new 0 0 92 92" xml:space="preserve">
<path id="XMLID_84_" d="M82,18H10c-2.2,0-4-1.8-4-4s1.8-4,4-4h72c2.2,0,4,1.8,4,4S84.2,18,82,18z M86,35.4c0-2.2-1.8-4-4-4H10
c-2.2,0-4,1.8-4,4s1.8,4,4,4h72C84.2,39.4,86,37.6,86,35.4z M86,56.7c0-2.2-1.8-4-4-4H10c-2.2,0-4,1.8-4,4s1.8,4,4,4h72
C84.2,60.7,86,58.9,86,56.7z M50,78c0-2.2-1.8-4-4-4H10.3c-2.2,0-4,1.8-4,4s1.8,4,4,4H46C48.2,82,50,80.2,50,78z"/>
</svg>

In this example, you copy-paste the blue part into the field Code

<path id="XMLID_84_" d="M82,18H10c-2.2,0-4-1.8-4-4s1.8-4,4-4h72c2.2,0,4,1.8,4,4S84.2,18,82,18z M86,35.4c0-2.2-1.8-4-4-4H10
c-2.2,0-4,1.8-4,4s1.8,4,4,4h72C84.2,39.4,86,37.6,86,35.4z M86,56.7c0-2.2-1.8-4-4-4H10c-2.2,0-4,1.8-4,4s1.8,4,4,4h72
C84.2,60.7,86,58.9,86,56.7z M50,78c0-2.2-1.8-4-4-4H10.3c-2.2,0-4,1.8-4,4s1.8,4,4,4H46C48.2,82,50,80.2,50,78z"/>

The final result look like this