Custom SVG Iconset

Starting with version 7.0 an SVG Icon Set based on iconfont entypo-fontello was added.

To use your own set of svg icons you need a zip file containing the svg files. This file can be uploaded via theme options page and then these svg icons can be selected.

Only icons needed on a page are added inline – so you are free to upload large sets of svg icons without producing an overhead on page load for not needed icons.

Use svg icon files to create svg icon set (Quick Setup)

  • Add all svg icon files in a folder “SVG”
  • Name of icon file (without svg) will be the name of the icon
  • Create a zip file where “SVG” is top directory
  • Name of zip file will become “name-of-font”

Use Fontello Iconfonts to create svg icon set

  • Create icon font with fontello (https://fontello.com/) and download zip (name it e.g. my-fontello)
  • Extract content in a directory
  • Use https://icomoon.io/app/#/select
  • Import my-fontello.svg from extracted folder – button “Import Icons” on left top
  • https://icomoon.io/app also offers free icons (see button “Icon Library” at left top or at bottom “Import from Library”)
  • Select the icons you want, you can also combine them from different libraries
  • You can also (see buttons at top)
    • remove icons not needed
    • move the icons to change order
    • edit icons
  • When ready click “Generate SVG and More” at bottom
  • use descriptive names for the icons – each icon must have a unique name, this name is also used for the svg file
  • Click “Preferences” icon at bottom or button at top and change the settings (these settings are not used by Enfold, but needed if you want to use the file “symbol-defs.svg”)
    • “Name” will be the name of the zip file and later the name of the font used in Enfold to group the svg icons (e.g. my-fontello)
  • Click “Download” at bottom to generate zip file e.g. my-fontello.zip that can be uploaded to theme
  • Inside the zip file you find:
    • folder “SVG” containing all icons as single .svg files wrapped in svg tags
    • file “symbol-defs.svg” containing the svg icons wrapped in symbol tag in a svg container
    • styles.css containing main style and extra styles for the icons (can be loaded on page load when using “symbol-defs.svg” )
    • file selection.json contains info icon font <<->> svg icons
    • file svgxuse.js is a polyfill to support older browsers like IE 9+
    • and some more files

Enfold only needs folder “SVG”, all other files are optional and not needed/used

Use any svg iconfont file to create svg icon set

  • https://icomoon.io/app/#/select supports upload of any svg iconfont file – button “Import Icons” on left top
  • select the svg file from the icon font (e.g. my-fontello.svg)
  • select the icons you like to combine in a single set
  • same steps as described above for export

Use svg icon files to create svg icon set

  • https://icomoon.io/app/#/select supports upload of multiple single svg icon files – button “Import Icons” on left top
  • upload all svg icon files you like
  • select the icons you like to combine in a single set
  • same steps as described above for export

Uploading svg icon sets via theme backend

  • content of zip file must contain directory SVG containing all svg icon files
  • additional files as described above when generated with icomoon will be recognized for import – but they are optional and not used by Enfold
  • Theme Options -> Import/Export ->SVG Icons and Iconfont Manager – same button for icon fonts and svg icon sets, will be recognized internally by content of zip file
  • name of zip file will be used as “name-of-font” (e.g. my-fontello.svg will become my-fontello)
  • to store content of zip file a folder will be created similar to icon font in folder dynamic_avia/avia_icon_fonts/svg_”name-of-font”:
    • SVG directory with all single svg files
    • style.css
    • symbol-defs.svg
  • we will extract infos in config files for easier access later during upload:
    • charmap.php
    • config.json
  • SVG set will be grouped in svg_”name-of-font” in icon select window (e.g. svg_my-fontello)

Using SVG icons in ALB Elements

  • in icon select window you find e.g. “SVG Icons: svg_my-fontello”.
  • icons in this group have a unique name (e.g. note)
  • select the icon you want (similar to icon font)

Using SVG icons in “Social Profiles”

  • svg icons have “SVG” added (e.g. Facebook SVG)

Using SVG icons in “Blog Layout”

  • svg icons have “SVG” added (e.g. Facebook SVG)

DEVELOPER SECTION

The following snippets provide support for SVG icons and iconfont icons.

Using SVG Icon in ALB element

At beginning of class add:


use \aviaBuilder\traits\modalIconfontHelper;

In function get_element_styles():


$element_styling->add_classes( 'container-icon', avia_font_manager::get_frontend_icon_classes( $atts['font'] ) );

In function shortcode_handler():

$display_char = avia_font_manager::get_frontend_icon( $atts['icon'], $atts['font'] );
$icon_class = $element_styling->get_class_string( 'container-icon' );

$char_html  = "<span class='av-seperator-icon {$icon_class}' {$display_char['attr']}>";
$char_html .=		$display_char['svg'];
$char_html .= '</span>';

Using SVG Icon in common:

$icon = 'note';
$font = 'svg_entypo-fontello';
$display_char = avia_font_manager::get_frontend_icon( $icon, $font );
$icon_class = avia_font_manager::get_frontend_icon_classes( $font, 'string' );

$char_html  = "<span class='av-seperator-icon {$icon_class}' {$display_char['attr']}>";
$char_html .=		$display_char['svg'];
$char_html .= '</span>';

Using SVG shortcut icons:

$display_char_prev = \avia_font_manager::get_frontend_shortcut_icon( "svg__prev", [ 'title' => '', 'desc' => '', 'aria-hidden' => 'true' ] );
$char_class_prev = \avia_font_manager::get_frontend_icon_classes( $display_char_prev['font'], 'string' );


$char_html  = "<span class='av-seperator-icon {$char_class_prev }' {$display_char_prev ['attr']}>";
$char_html .=		$display_char_prev ['svg'];
$char_html .= '</span>';