SVG Icons offers a custom field type allowing users to choose icons from individual files or sprite sheets within Craft CMS.
To install SVG Icons, follow these steps:
- Download & unzip the file and place the
svgicons
directory into yourcraft/plugins
directory - -OR- do a
git clone https://github.com/fyrebase/svg-icons.git svgicons
directly into yourcraft/plugins
folder. You can then update it withgit pull
- Install plugin in the Craft Control Panel under Settings > Plugins
- The plugin folder should be named
svgicons
for Craft to see it. GitHub recently started appending-master
(the branch name) to the name of the folder for zip file downloads.
SVG Icons works on Craft 2.6.x.
The SVG Icons plugin introduces a custom fieldtype allowing you to quickly and easily access any set of SVG icons stored within your sites public directory without giving your clients the ability to delete or upload.
To get started, simply create a directory called svgicons
(This is configurable) in your public
directory and place a subdirectory containing your SVG icons within. You can add as many icon sets as you like.
To use SVG sprite sheets the sprite sheet must end with -sprites
with either a css
or svg
extension.
Create a field using the SVG Icons
field type and choose which icon set you would like to use.
SVG Icons comes with its own config.php
which you can over ride by simply creating a svgicons.php
in your Craft config
directory.
Default $_SERVER['DOCUMENT_ROOT'] . '/svgicons/'
File system path to the folder where you want to store your icon sets.
Default '/svgicons/'
The iconSetsUrl
will be prepended to the path and filename of the icon.
Public attributes and methods of the SvgIconsModel
model.
icon
[string]
The icon path
sprite
[string]
The icon id within the sprite sheet
width
[number]
The icon original width
height
[number]
The icon original height
{{ svgIcon }}
[string]
Returns icon path or icon id within sprite sheet
{{ svgIcon.inline }}
[string]
Returns raw SVG for inlining. Only applicable when using individual SVG files and not sprite sheets. If no SVG file found returns empty string.
Example {{ svgIcon.inline }}
{{ svgIcon.url }}
[string]
Returns icon path
Example {{ svgIcon.url }}
{{ svgIcon.sprite }}
[string]
Returns icon id within sprite sheet
Example {{ svgIcon.sprite }}
{{ svgIcon.dimensions }}
[array]
Returns icon dimensions as array
Example {{ svgIcon.dimensions }}
{{ svgIcon.setDimensions(newHeight) }}
[array]
Returns icon new dimensions in pixels as array maintaining aspect ratio
Example {{ svgIcon.setDimensions(24) }}
{{ craft.svgIcons.inline(path) }}
[string]
Returns raw SVG for inlining. Only applicable when using individual SVG files and not sprite sheets. If no SVG file found returns empty string.
Example {{ craft.svgIcons.inline('fontawesome/align-left.svg') }}
{{ craft.svgIcons.getDimensions(path) }}
[array]
Returns icon dimensions as array
Example {{ craft.svgIcons.getDimensions('fontawesome/align-left.svg') }}
{{ craft.svgIcons.setDimensions(path, newHeight) }}
[array]
Returns icon new dimensions in pixels as array maintaining aspect ratio
Example {{ craft.svgIcons.setDimensions('fontawesome/align-left.svg', 24) }}
Some things to do, and ideas for potential features:
- Ability to use SVG sprites
- Get rid of the initial none icon allowing user to search straight away
If you stumble across any bugs let me know, or better yet submit a pull request!
I'm open to feed back and suggestions as I'm sure there is plenty of room for improvement.
- [Fixed] JavaScript namespacing issue
- [Fixed] PHP error when failing to add icon sets during field setup.
- [Added] Initial support for SVG sprite sheets. CSS and SVG based.
- [Added] Obtain icon model from string using new template variable
getModel
- [Added] Renamed
getIconFromString
service method togetModel
and fixed pathing issue - [Improved] Updated README.md
- Initial release
Brought to you by Fyrebase