Acumatica。我们如何将自己的图标添加到Modern UI？

Question

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

Answer 1

对于现代UI中的工作区和图块，Acumatica ERP使用基于Font Awesome的字体中的图标。从Acumatica ERP 2017 R2 Update 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>标签中使用任何其他标签（例如<style>或<svg>标签）。这些图标将被引用并自动以Acumatica ERP的颜色填充。

3. 将SVG文件放置在站点文件夹的Content/svg_icons子文件夹中。
   您现在可以按照与使用默认图标相同的方式在应用程序中使用此图标。例如，您可以在现代UI的“菜单编辑”模式下为新的工作区或图块选择此图标。

用SVG图标替换默认图标

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

注意

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

在呈现现代UI期间，浏览器将使用SVG中的图标代替相应的默认图标。