Acumatica。我们如何将自己的图标添加到现代 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. 在文件中，用<symbol> 标记将每个<path> 标记括起来，并指定以下属性的值：

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

     注意

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

   • viewBox：定义图标的坐标。 viewBox 必须是方形的（例如 viewBox="0 0 24 24"）。您可以从<svg> 标签中剪切viewBox 属性并将其粘贴到<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>

   注意

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

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

用 SVG 图标替换默认图标

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

注意

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

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