How to use svg icons in a web content of Liferay

0
votes

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

3
svgiconsliferayliferay-7liferay-theme
The problem is most likely the URL that you're using for your icon: It needs to be relative to the page, not to the theme. Check, which URL the icon is being requested from. Most likely it'll 404. Compare with the URL of other icons – Olaf Kock
...and please link your crossposts – Olaf Kock
@OlafKock That's not the problem. I used the correct path (absolute and relative), but the 'use' tag disappears when I save the web content. Thanks – user3753950
have you tried the Liferay tag for this? I think there is liferay-ui tag (liferay-ui:icon) that can be used for rendering svgs. – Miroslav Ligas

3 Answers

1
votes

Your issue has nothing to do with the path or using a Liferay tag or not (tags would not even have any effect if included inside those items via editors). It seems to be a simple editor issue, which is the root cause of your problem.

You will need to configure your editor to accept the use tag and avoid its removal when web content items are cleaned up, prior to saving.

https://www.e-systems.tech/blog/-/blogs/editor-configuration-contributor

1
votes

@Victor is correct.

I'll also add, these are WYSIWYG Editors, not HTML editors. Source really shouldn't be edited manually. Source View is only there for convenience.

If you want explicit markup, use a Web Content Structure.

0
votes

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