README

受以下拉请求启发 this pull request.

这个包的目标是什么？

将自定义功能导入 sulu，例如，一个自定义的内容类型。
此包将使用来自 IcoMoon 的图标库。

安装

使用以下命令行在您的项目中下载 package
composer require sevengroupfrance/sulu-icon-picker-bundle.
在 config/bundles.php 中添加以下代码
SevenGroupFrance\SuluIconPickerBundle\FontIconPickerBundle::class => ['all' => true].
在 assets/admin/package.json 中，在 "dependencies" 对象中添加以下行
"sulu-icon-picker-bundle": "file:node_modules/@sulu/vendor/sevengroupfrance/sulu-icon-picker-bundle/src/Resources/js".
在 assets/admin 中，执行 npm install 以初始化包的符号链接目录。
在 assets/admin/index.js 中添加此行
import 'sulu-icon-picker-bundle'.
在 assets/admin 中，执行 npm run watch 或 npm run build

使用 IcoMoon 创建自己的图标列表

从此页面，我们可以选择我们想要的任何图标。如果您想导入库，请点击这里

从这里，您可以点击 + Add 按钮选择您想要的任何库。

然后，通过点击它们或选择您项目中的右上角的菜单中的所有图标来选择您想要使用的图标。在底部菜单中，点击 Generate SVG & More 按钮。
从这里，您可能希望根据需要命名您的图标，因为这个图标选择器具有搜索功能。完成后，点击“下载”按钮。

在您刚刚下载的文件中，您需要两个文件： selection.json 和 symbol-defs。用您自己的替换包的 selection.json 文件内容，并用您自己的替换包的 Iconlist.js 文件的 <defs> 标签内容。如果您想在 Iconlist.js 的返回函数中放入整个 SVG，请小心地将内联样式转换为 react 样式（从字符串转换为对象）。

自 1.0.4 版本起配置您自己的列表

首先，在您的 assets/admin 文件夹中创建一个 iconlist 文件夹。然后，创建一个 Iconlist.js，其中您将创建一个 React 函数组件。

import * as React from 'react';

const Iconlist = () => {
}

export default Iconlist

然后，直接在 return 函数中添加 svg 文件内容，如下所示

import * as React from 'react';

const Iconlist = () => {
  return(
    <svg aria-hidden="true" className="iconlist" style={{ position: "absolute", width: 0, height: 0, overflow: "hidden" }} version="1.1" xmlns="http://www.w3.org/2000/svg">
      <defs>
        **your <symbol> here**
      </defs>
    </svg>
  )
}

export default Iconlist

始终记住将您的 HTML 属性转换为 REACT 属性语法

示例：<path style="fill: '#969695'" ... 到 <path style={{ fill: "#969695" }} ...

在前端加载您的 SVG

在您项目的 templates 目录中，创建一个新的 twig 模板。在此模板中，粘贴 symbol-defs 文件的内容。完成后，在 <body> 标签之后导入您的 twig 模板。
{% include "yourtemplate.html.twig" %}

在模板文件中使用

安装后，要使用这种新的内容类型，您需要创建一个类型为 font_icon_picker 的新属性。

<property name="icon" type="font_icon_picker">
  <meta>
    <title lang="en">Section's Icon</title>
  </meta>
</property>

此外，为了在您的后端应用中加载SVG，您需要在新属性列表的顶部创建一个类型为 icon_list 的新属性。

<property name="your_icon_list" type="icon_list">
  <meta>
    <title lang="en"></title>
  </meta>
</property>

由于图标属性返回一个数组，在您的twig模板中，您需要精确指定这个数组的第一个参数，例如

{% if block.icon %}
  <svg class="{{block.icon[0]}}" aria-hidden="true" focusable="false">
    <use xlink:href='#{{block.icon[0]}}'/>
  </svg>
{% endif %}

已知问题

图标选择器无法读取带有 style 属性的 <path> 图标。这是因为我们尝试在react组件中渲染SVG，因此 style 属性应该是一个对象，并且多个短横线属性应该转换为驼峰式。

sevengroupfrance / sulu-icon-picker-bundle

维护者

详细信息