14 votes

SVG Icon Picker

 

New in 1.1

- Fixed the size of the preview (#h5yr @bjarnef)
- Now uses umb-overlay for picking icons (#h5yr @bjarnef)
- Removed some console.logs (#h5yr @bjarnef)
- Nuget package added
- Removed some temporary files not necessary for the package
- Changed license to MIT

 

 

A picker, for picking icons from an SVG spritesheet.

How to use

Pick SvgIconPicker as the editor for your desired icon property.

Type the path to your SVG spritesheet in the configuration.

On the document where you put the editor, it works just like the built in media picker mixed with the icon picker. You can filter icons, by searching the icons id. Select an icon by clicking it.

The selected icons id is saved as a string in the property value.

You can then render it in your frontend using a snippet like this:

<svg viewBox="0 0 100 100">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg.svg#@Model.Content.GetPropertyValue("icon")"></use></svg>

Screenshots

Package owner

Søren Kottal

Søren Kottal

Søren has 2227 karma points

Package Compatibility

This package is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco Cloud
8.0.x (untested)
7.14.x (untested)
7.13.x (untested)
7.12.x (100%)
7.11.x (untested)
7.10.x (0%)
7.9.x (untested)
7.8.x (untested)
7.7.x (100%)
7.6.x (67%)
7.5.x (100%)
7.4.x (100%)
7.3.x (100%)
7.2.x (untested)
7.1.x (untested)
7.0.x (untested)
6.1.x (untested)
6.0.x (untested)

You must login before you can report on package compatibility.

Package Information

  • Package owner: Søren Kottal
  • Created: 24/05/2016
  • Current version 1.1.0
  • .net Version 4.5
  • License MIT
  • Downloads: 957

External resources