MC SVG Icon
Developer
3rd Party (Free)
183 downloads (last 90 days)
EE Version Support
- ExpressionEngine 2
Compatibility
If an item is crossed out, it might be untested, not applicable or incompatible. Contact the developer to be sure.
- Updater
- Multi Site Manager
- Stand Alone Entry Form
- Low Variables
- Content Elements
- Better Workflow
- Matrix
- Grid
- Webservice
- Publisher
Requirements
- jQuery for the Control Panel
Add-On Type(s)
Plugin
Tags
- svg, icon, easy icons, simple
MC SVG Icon is a simple plugin to enable easy use of external SVG icons in EE2.
MC SVG Icon is a simple plugin to enable easy use of external SVG icons in EE2.
Usage
Standalone (no index.php changes)
{exp:svg:single:[full_symbol_ID] file="/relative/path/to/svgdefs.svg"}
For example:
{exp:svg:single:icon-home file="/assets/svg/svgdefs.svg"}
Single tag:
{exp:svg:single:[symbol_ID]}
Where [symbol_ID]
is the ID of the desired <symbol>
, sans whatever you specified for icon_svg_symbol_id_prefix
in the index.php
. So to show the home icon, use {exp:svg:single:home}
.
Tag Pair:
{exp:svg:pair}[symbol_ID]{/exp:svg:pair}
Parameters
class="myclass"
Adds the specified class(es) to the generated <svg>
tag.
title="My Title"
Adds a <title>
tag to the generated <svg>
and links it to the <use>
tag using aria-labelledby
.
fill="#bada55"
(added in v1.1)
Applies the specified fill color to the generated <use>
tag.
file="/relative/path/to/svgdefs.svg"
The .svg
file to use for this instance. It can either be used as an override of the regular file specified in index.php
, or as a way of avoiding alterations to index.php
altogether.
The path should be relative to the web root, as it will be used by the browser to find the external .svg
file.
Config vars in index.php (optional; recommended)
Add to index.php
(or your equivalent) the following:
$assign_to_config['icon_svg_file'] = '/relative/path/to/svgdefs.svg';
$assign_to_config['icon_svg_symbol_id_prefix'] = 'icon-';
$assign_to_config['icon_svg_global_class'] = 'icon';
(The prefix is what you see in the ‘id’ parameter on line 3 below)
Sample svgdefs.svg
1: <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2: <defs>
3: <symbol id="icon-home" viewBox="0 0 1024 1024">
4: <title>home</title>
5: <path class="path1" d="..."></path>
6: </symbol>
7: <!-- more <symbols> -->
8: </defs>
9: </svg>
The svgdefs.svg
generated by the wonderful IcoMoon.io app is perfect for this.
Sample Output
Assuming the following settings in index.php
:
$assign_to_config['icon_svg_file'] = '/assets/svg/svgdefs.svg';
$assign_to_config['icon_svg_symbol_id_prefix'] = 'icon-';
$assign_to_config['icon_svg_global_class'] = 'icon';
The template code {exp:svg:single:home class="myclass"}
would produce:
1: <svg class="icon icon-home myclass">
2: <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svgdefs.svg#icon-home"></use>
3: </svg>
By adding a title parameter, the code {exp:svg:single:home class="myclass" title="My Title"}
would produce:
1: <svg class="icon icon-home myclass">
2: <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svgdefs.svg#icon-home" aria-labelledby="title__home">
3: <title id="title__home">My Title</title>
4: </use>
5: </svg>
Download MC SVG Icon
EE Support | Downloads | Add-On Version | Release Date |
---|---|---|---|
Not Specified | Download | 1.0.1 | Sep 28, 2015 |
Not Specified | Download | 1.1.0 | Nov 12, 2015 |
MC SVG Icon Links
This entry was created September 28, 2015, 1:00 pm.
This entry was last updated November 12, 2015, 2:22 pm.
Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!
Returns: devot:ee has a 30-day return policy on all commercial add-ons sold through devot-ee.com. If you need to return an add-on, do not go to the developer or the developer's site, but rather visit our returns page at https://devot-ee.com/returns to initiate your return. If you have questions, email support@devot-ee.com.
There are no reviews for this add-on yet.
What are you waiting for? Rate it and review it!