如何在 Liferay 的网页内容中使用 svg 图标

Question

我使用 liferay 7.1 (ga2) 并且我正在开发一个主题（使用主题生成器）。我对网页内容中的 svg 图标有疑问。

我添加了一个目录 images（在 /src 中），其中包含一个 svg 目录，该目录又包含（一个 sprite）svg 图标。

在网页内容中，我想调用这些 svg 图标，例如使用 HTML 语句：

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

我尝试了不同的路径 (href)。主要问题是，只要我保存网页内容，Liferay 就会自动将前面的代码翻译成：

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

因此，删除相对于路径（'use'标签）的部分。当然，图标是不可见的。

为什么？我应该怎么做才能在网页内容中包含 svg 图标？

谢谢

弗朗切斯科

Answer 1

您的问题与路径或是否使用 Liferay 标签无关（如果通过编辑器将标签包含在这些项目中，标签甚至不会产生任何影响）。这似乎是一个简单的编辑器问题，这是您问题的根本原因。

您需要将您的编辑器配置为接受 use 标签，并避免在保存之前清理网页内容项目时将其删除。

Answer 2

@Victor 是正确的。

我还要补充一点，这些是所见即所得的编辑器，而不是 HTML 编辑器。源确实不应该手动编辑。源视图只是为了方便。

如果您想要显式标记，请使用 Web Content Structure。

Answer 3

好的，我解决了。

问题不在于编辑器，也不在于liferay。

问题是，如果我编译和构建 bootstrap 主题，在 /dist 目录（bootstrap 主题）中我有 sprite.svg，而在 /src（的bootstrap theme）我有单独的图标。我加载了单独的图标。

相反，如果我将 sprite.svg（bootstrap 主题）复制到 /src/images/svg（liferay 主题）中，那么一切正常。也来自网络内容。

谢谢大家

弗朗切斯科

How to use svg icons in a web content of Liferay