svgiconsliferayliferay-7liferay-theme

How to use svg icons in a web content of Liferay

I use liferay 7.1 (ga2) and I'm developing a theme (with theme generator). I have a problem with svg icon in a web content.

I added a directory images (in / src), containing a svg directory which in turn contains (a sprite) svg icons.

In a web content, I would like to invoke these svg icons, for example with the HTML statement:

<svg class="icon">
   <use xlink:href="./images/svg/sprite.svg#icona1"></use>
</svg>

I tried different path (href). The main problem is that as soon as I save the web content, Liferay automatically translates the previous code into:

<svg class="icon">
</svg>

Therefore, the part relative to the path ('use' tag) is deleted. And the icons, of course, are not visible.

Why? What should I do to include svg icons in a web content?

Thank you

​​​​​​​Francesco

Solution

  • ok, I solved.

    The problem is not the editor nor liferay.

    The problem is that if I compile and build the bootstrap theme, in /dist dir (of bootstrap theme) I have the sprite.svg, while in /src (of bootstrap theme) I have the individual icons. I loaded the individual icons.

    Instead, if I copy the sprite.svg (of bootstrap theme) in /src/images/svg (of liferay theme), then everything is ok. Also from web content.

    Thank you all.

    Francesco