README

TYPO3 扩展 bw_icons

用于 TCA 和 RTE 的图标选择器。生成可浏览的图标字体和 SVG 图库 - 只需链接你的样式表或图像目录。支持 FontAwesome、Bootstrap、Icomoon 等。可选地添加图标字段到页面、tt_content 或 sys_category。

演示

功能

• 图标选择器表单元素
• tt_content、页面和 sys_category 的图标字段
• RTE 插件
• 带筛选功能的图标库
• 显示图像文件或字体（CSS）中的图标
• 提取和缓存字体样式（CSS）
• 支持远程 CSS 文件
• 可以在前端包含生成的样式表

技巧：使用您的 Icomoon 开发文件。您的图标选择器始终是最新的，并且您可以自行从远程服务器提供字体文件，而无需手动下载和调整路径！

安装

1. 通过 composer 安装

   composer require blueways/bw-icons
   

2. 更新数据库模式

3. 包含 PageTS

   在扩展管理器中启用扩展并包含用于 TYPO3 核心图标的 静态 PageTS，或设置您自己的图标。参见 配置 部分。

4. 启用 tt_content、页面和/或 sys_category 的图标

   在扩展设置（Admin Tools → Extension Configuration → bw_icons）中，您可以启用图标字段。如果您想用于其他表，请参阅 开发人员 部分。

5. 包含 RTE 配置（可选）

   imports:
      - { resource: EXT:bw_icons/Configuration/RTE/IconPicker.yaml }
   
   editor:
      config:
        toolbar:
          - { name: 'icon', items: [IconPicker] }

配置

通过 PageTS 设置显示的图标。选择一个唯一的标识符，如果您想添加目录中的图像文件，请选择 FileIconProvider；如果您想显示样式表中的字体图标，请选择 CssIconProvider。

mod.tx_bwicons {

    # Get icons from directory and subdirectory. Subdirectories become sidebar links.
    typo3icons = Blueways\BwIcons\Provider\FileIconProvider
    typo3icons {
        title = TYPO3 Icons
        folder = EXT:core/Resources/Public/Icons/T3Icons/svgs
    }

    # Get icons from stylesheet. Multiple font-faces in one file become sidebar links.
    fontawesome = Blueways\BwIcons\Provider\CssIconProvider
    fontawesome {
        title = FontAwsome
        file = fileadmin/fontawesome/css/all.css
    }

    # Get icons from remote stylesheet. Styles and font files are cached in /typo3temp
    icomoon = Blueways\BwIcons\Provider\CssIconProvider
    icomoon {
        title = Icomoon
        file = https://i.icomoon.io/public/b23ec64zea/Project/style.css
        # optional: adjust markup in backend wizard
        # defaults to <i class="###ICON###"></i>
        markup = <span class="my-custom-class ###ICON###"></span>
    }
}

更改设置后，请确保清除缓存。

RTE 配置

导入 yaml 配置后，您可以在 RTE 中添加任何您想要的位置。有关 RTE 配置的更多信息，请参阅 这里。

imports:
    - { resource: EXT:bw_icons/Configuration/RTE/IconPicker.yaml }

editor:
    config:
        toolbar:
            - { name: 'icon', items: [ IconPicker ] }

使用方法

如果使用 FileIconProvider，图标以文件名（例如 EXT:myext/Resources/Public/Images/icon.svg 或 fileadmin/icons/foo.png）保存；如果使用 CssIconProvider，则以 CSS 类名（例如 fas fa-arrow-right）保存。

如果您只配置了 SVG 的选择，您可以在您的 fluid 模板中安全地使用 <f:image src="{data.tx_bwicons_icon}" /> 视图助手。

仅使用字体图标时，可以输出为 <i class="{data.tx_bwicons_icon}"></i>。

如果您有混合，可以使用我的视图助手，通过检查图标名称中的点来确定类型。

{namespace bw=Blueways\BwIcons\ViewHelpers}

<bw:icon icon="{data.tx_bwicons_icon}" /> Hello world!

输出

<i class="fa fas-wave"></i> Hello world!

或

<img src="/fileadmin/icons/foo.svg" /> Hello world!

CSS 前端包含

如果您想在前端包含提取的样式，可以使用 CssUtility 在页面头部生成样式标签。将其包含在您的 TypoScript 设置 中。

page.headerData {
    123 = USER
    123.userFunc = Blueways\BwIcons\Utility\CssUtility->includeStyleSheets
}

开发人员

在其他表中使用

1. 为图标创建数据库字段

   create table tx_myext_domain_model_foo (
       icon_field varchar(255) not null default '',
   );

2. 编辑 TCA：在配置数组中添加渲染类型 iconSelection

   ...
   'icon_field' => [
        'label' => 'My Icon',
        'config' => [
           'type' => 'input',
           'renderType' => 'iconSelection'
        ]
   ],
   ...

   可选：您可以限制可用的图标提供者

   ...
   'icon_field' => [
        'label' => 'My Icon',
        'config' => [
           'type' => 'input',
           'renderType' => 'iconSelection',
           'iconProviders' => 'fontawesome,otherProviderKey'
        ]
   ],
   ...

新的图标源

如果您想添加其他图标来源（例如从API），您可以创建自己的IconProvider。只需确保从Blueways\BwIcons\Provider\AbstractIconProvider扩展即可。

贡献

此扩展由Maik Schneider制作：欢迎贡献！

• GitHub仓库

感谢blueways和XIMA！