Proof of Concept, SVG-icons

[horst]

Hi, I'm not sure if this can be useful or not. Check by your self.

I have created a little module around a set of 42 svg icons. (nearly a copy from Windows 10 iconset). It is very rudimentary at the moment.

One can define settings for colors and size of the svg variations. Variations will be created on demand in a central directory (assets/svgicons/) and cached for later usage. The settings can be passed as selectorstrings.

You can use a template variable $icon. To output markup for a plain svg icon in an image tag, you need to call the name:

echo $icon->img("name=lock");
echo $icon->img("name=unlock");

If you want use it as a rollover with hover state, you need to call the function markup:

echo $icon->markup("name=attention");

This gives you markup with default settings. If you need a clickable link, just define it in the selector string:

echo $icon->markup("name=attention, link=/about/");

You can set / change the default values from template like:

$icon->setColors(array(0, 111, 187, 0.2), array(219, 17, 116, 1.0));
$icon->setSize(180);

and / or you can use individual settings for each icon:

echo $icon->markup("name=document, size=32, color1=#775599, color2=blue, link=/about/");            // HEX colors or named colors

echo $icon->markup("name=idea, size=120, color1=255-255-0-0.3, color2=255-255-0-1, link=/about/");  // RGBA colors

echo $icon->markup("name=home, size=20, color1=230-0-0, color2=230-0-0, link=/about/");             // RGB colors

 .

For the rollover / hover markup there is a piece of css needed what can be outputted (only once). It can be fetched with or without the style-tags:

echo $icon->css();      // with style tags
echo $icon->css(true);  // suppress the style tags

.

The functions that does not output markup return the module itself (the $icon object). So you can use them chained:

// all functions that can be chained:
$icon->emptyCache()->setSize(100)->setColors(array(0, 111, 187, 0.25), array(243, 79, 159));

// after such a (re)set call, you only need to pass a name to each icon call to get consistent results:
echo $icon->markup("name=lock, link=/logout/");
echo $icon->markup("name=unlock, link=/login/");

// you can override single settings, ->mu() is a shortcut for ->markup()
echo $icon->mu("name=trash, size=200");
echo $icon->mu("name=key, color2=red");

// ->presentation() print the whole collection with optionally individually specified size and colors:
echo $icon->presentation(100, array(0, 111, 187, 0.25), array(243, 79, 159));

 .

 .

 .

The code is here in a gist: https://gist.github.com/horst-n/f6922f6fa228991fd686

 .

Download it as ZIP!

 .

 .

A live demo is here: http://images.pw.nogajski.de/svg-icons/

 .

 .

[MatthewSchenker]

Greetings,

Terrific!

Horst, you should be named "PW Graphics Guru."

Thanks for your great work,

Matthew

[Mike Rockett]

This looks great! Going to try it out in a new project soon.

[rick]

+ 10^2

Horst, you should be named "PW Graphics Guru."

[adrian]

Looks awesome horst!

What do you think about maybe defining the icons in a different file? Either for all the icons, or an optional, additional file that each developer can maintain for their own icons?

I actually think two separate files might be nice - one in your module's directory so that we can easily contribute new icons via PRs, and the another one that sits under /assets/svg-icons/ that we can maintain ourselves.

[adrian]

Another idea - what about storing the icon code in the db? You could maybe even have a module config tool for adding new icons - an upload field that takes the SVG from the uploaded file, and encodes it so it's ready for storage and usage in the module? Or maybe write the encoded content back to the file in the filesystem?

[horst]

Adrian, both ideas sound good.

I also have thought if it would be better to only store the <path></path> part of the original icons? So, it is the first time I look into SVG. As I know, you are much more experienced with it.

My initial thought was, that other devs can take the gist and build their own modules. Thats why I called it a POC. But the idea with decoupled icon files or storing the icon data into the DB sounds very good. If you like, you can take it over, or you can commit to it. If that isn't doable with gists, we can put it into a github repo. I'm very short with time atm. It was fun to play with this. But for now, my time budget is empty.

If you cannot or do not want to take it over, we also can collect ideas and / or code snippets until someone has time to code it in.

[adrian]

Thanks horst - I am interested in putting some time into this - will have to see how my commitments pan out. I do think I could make significant use of it though, so maybe can justify it sooner than later. 

One additional idea would be to allow for injecting "ng-attr-fill" into the svg code for styling with angularjs expressions - I know, getting a little carried away

[horst]

@Adrian: One day later, I think the best way really would be to have an upload / import function for svg-images, where they get prepared for further usage in the module. At least this should include to check/set width and height to 100% and to inject a css-color-var. That said, you need to drop or reformat my usage with the svg-template. But I think this isn't the big part of the changes we will see!

Regarding the storage of the original / source images, (DB or files), I think DB is saver. Files easier can be changed / deleted by accident.

I'm very happy that you take it and bring it further.

PS: I have updated the gist to version JamesBond, (0.0.7). Mainly added/corrected the presentation function, what draws nice overview charts.

Edited September 26, 2015 by horst

[Juergen]

I wanted to try this awesome module, but unfortunately I got this error after installation:

Notice: Undefined index: MarkupSvgIcons in ..../web/wire/core/Modules.php on line 569 Notice: Undefined index: in ..../wire/core/Modules.php on line 570 

[Juergen]

SOLVED: changed the module name from MarkupSVGIcons.module to MarkupSvgIcons.module - error is gone away.