Add svg processing into the build

[mir333]

I'm currently struggling with adding a new flag into the Liferay theme. Flags are part of lexicon where they are building out of small svg files into the aggregated icons.svg.

Currently, the only way how to add additional flags is to take the compiled svg file and add the code into it. This is not a very nice way how to solve this.

I would like to just add the svg files in the right folders and the theme should run the compilation for me.

I implemented a custom build for me with the code from lexicon project and it works nicely. I can do a PR if it's get accepted.

[robframpton]

Hey @mir333,

Do you have a branch we can look at for your custom build? It might make a nice hook module.

@pat270, does Lexicon already have a way for extending the icons?

[pat270]

Hey @Robert-Frampton,

We don't have any way to extend svg icons through Lexicon, without building a new version yourself. @mir333's way is the right way to do it.

The only thing Lexicon provides is setting an svg as a background-image on an element.

$my-flag-svg: '<svg></svg>';

.my-element {
    background-image: svg-url($my-flag-svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    height: 16px;
    width: 16px;
}

[mir333]

Hi guys I was busy finishing work before Christmas break but I will create the branch during the holidays.

[mir333]

Hi @Robert-Frampton

have a look at https://github.com/mir333/liferay-theme-tasks/tree/svg. This should theoretically work but I'm unable to make the test run.

It's just copy& paste from Liferay lexicon.

I used this to solve my problem directly in the theme but I don't know how portable it is.

[jbalsas]

Hey @mir333, I know this is waaay too long overdue, but I didn't want to just let this go. We're definitely going to look into this. For now, I've moved this to https://github.com/liferay/liferay-themes-sdk/issues/50 in the new repo location.

Please, feel free to send a PR with your old code if still interested. Otherwise, we'll likely use it as inspiration if you don't mind 😉

Thanks!