1

我们如何通过自定义项目将我们自己的图标（如https://snag.gy/lEh0NT.jpg）添加到 Modern UI 中？所以我们有 .svg 文件，我们需要在 Modern UI 中像其他图标一样使用这些图标。谢谢

4

1 回答 1

3

对于现代 UI 中的工作区和磁贴，Acumatica ERP 使用基于Font Awesome字体的图标。从 Acumatica ERP 2017 R2 更新 5 (17.205.0015) 开始，您可以将自定义图标创建为 SVG 文件，并将它们与默认图标一起或代替默认图标用于工作区和磁贴，如本主题中所述。

为工作区或磁贴添加 SVG 图标

  1. 创建一个带有图标的 SVG 文件。以下代码显示了 SVG 文件的示例。 

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M0 0h24v24H0z"/>      
</svg>

  2. 在该文件中，用具有指定以下属性值的标记包围每个 <path>标记：<symbol>

    • id：指定图标的 ID。系统通过这个 ID 找到图标来呈现它。系统还使用该属性的值来创建现代 UI 中显示的图标名称（当您在现代 UI 的菜单编辑模式中选择新工作区或新磁贴的图标时）。系统将值中的下划线替换为id空格，以创建 UI 的图标名称。

      笔记

      您可以在一个 SVG 文件中包含<symbol>具有不同属性值的多个标签。id例如，如果所有这些图标都应该用于一个工作区的图块，您可以在一个 SVG 文件中放置多个图标。这将加速工作区的渲染。

    • viewBox：定义图标的坐标。必须是方形的viewBox（例如 viewBox="0 0 24 24"）。您可以从标签中剪切 viewBox属性 <svg> 并将其粘贴到 <symbol> 标签中。如果一个文件中有多个图标，请确保为每个图标指定了正确的值。

    以下代码显示了一个 SVG 文件的示例，其中进行了必要的更改。

    <svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="my_icon" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z"/>
  </symbol>
</svg>
    笔记

    您不需要在标签中使用任何其他标签（例如<use> or<style>标签）<svg>。这些图标被引用并自动填充了 Acumatica ERP 的颜色。

  3. 将 SVG 文件放在 Content/svg_icons 站点文件夹的子文件夹中。
    您现在可以像使用默认图标一样在应用程序中使用此图标。例如，您可以在现代 UI 的菜单编辑模式中为新工作区或磁贴选择此图标。

用 SVG 图标替换默认图标

要将默认图标替换为 SVG 图标，请按照上述说明进行操作，并使用要替换的默认图标  的名称作为标记id 属性的值。<symbol>例如，如果要替换 Finance 工作区的图标，请使用 id="balance-scale".

笔记

您可以通过工作区名称在应用程序数据库的表中找到所需的默认图标MUIWorkspace的名称：该Title列包含工作区的名称；该Icon列包含图标的名称。

在现代 UI 的呈现过程中，浏览器将使用 SVG 中的图标而不是相应的默认图标。

于 2018-06-28T16:23:02.420 回答