YAML-Configuration Examples

Detailed information on the use of YAML can be found here.

Example 1 (Simple)

iconpack:
   title: "Custom Icons"
   key: "ci"
   version: "1.0"

   renderTypes:
      webfont:
         css: "EXT:iconpack_mfg/Resources/Public/Css/CustomWebfont.css"
         prefix: "mfg-"
         attributes:
            class: "mfg"
            aria-hidden: "true"
            role: "img"

   icons:
      - cloud
      - at
      - plus
      - minus
      - arrow_up
      - arrow_down
      - arrow_right
      - arrow_left

Example 2 (Extended)

iconpack:
   title: "Bootstrap Icons"
   key: "bi1"
   version: 1.10.2
   url: "https://icons.getbootstrap.com/"

   renderTypes:
      webfont:
         css: "EXT:iconpack_bootstrap/Resources/Public/Vendor/icons-1.10.2/font/bootstrap-icons.css"
         prefix: "bi-"
         attributes:
            aria-hidden: "true"
            role: "img"

      image:
         source: "EXT:iconpack_bootstrap/Resources/Public/Vendor/icons-1.10.2/icons/"
         attributes:
            class: "bi"

      svgSprite:
         source: "EXT:iconpack_bootstrap/Resources/Public/Vendor/icons-1.10.2/bootstrap-icons.svg"
         attributes:
         class: "bi"
            fill: "currentColor"

      svgInline:
         source: "EXT:iconpack_bootstrap/Resources/Public/Vendor/icons-1.10.2/icons/"
         attributes:
            class: "bi"
            fill: "currentColor"

   icons: "EXT:iconpack_bootstrap/Resources/Public/Vendor/icons-1.10.2/font/bootstrap-icons.json"

Example 3 (Complex)

iconpack:
   # The title which is used in the backend [mandatory]
   title: "Fontawesome Icons 5 (mod)"
   # The main key for this iconpack [mandatory]
   key: "fa5"
   version: "5.15.4"
   url: "https://fontawesome.com/"

   # Override predefined preferred renderTypes (The first available type is selected) [optional]
   preferredRenderTypes:
      backend:
         native: "svgSprite,svgInline,webfont,svg"
         rte: "webfont,svg"
      frontend:
         native: "svgInline,svgSprite,webfont,svg"
         rte: "svgInline,svgSprite,webfont,svg"

   # Use only the following styles, even if others would be available in principle
   stylesEnabled: "regular,solid,brands"

   renderTypes:
      # Default values (Always included in all renderTypes!)
      _default:
         # Default values (Always included in all styles!)
         _default:
            prefix: "fa-"
            #attributes:
               # Note: Individual classes can be added here.
               #class: "XXX XXX2 XXX3"
               # Note: Individual styles can be added here.
               #style: "color:white;background-color:red"
            css:
               # Included in all styles but only in CKEditor
               ckeditor: "EXT:iconpack_fontawesome/Resources/Public/Css/CustomStylesForCKEditor.css"
         regular:
            # Note: Language specific labels possible:
            #label: "LLL:EXT:iconpack_xxx/Resources/Private/Language/locallang_be.xlf:label"
            label: "FontAwesome (Regular)"
            attributes:
               class: "far"
               #style: "background-color:green"
         solid:
            label: "FontAwesome (Solid)"
            attributes:
               class: "fas"
         brands:
            label: "FontAwesome (Brands)"
            attributes:
               class: "fab"

      webfont:
         _default:
            css:
               # Include in all webfonts-styles in all scopes (backend, CKEeditor, frontend)
               shared: "EXT:iconpack_fontawesome/Resources/Public/Css/StylesForAllWebfonts.css"
            attributes:
               aria-hidden: "true"
               role: "img"
         regular:
            css: "EXT:iconpack_fontawesome/Resources/Public/Css/regular.css"
         solid:
            css: "EXT:iconpack_fontawesome/Resources/Public/Css/solid.css"
         brands:
            css: "EXT:iconpack_fontawesome/Resources/Public/Css/brands.css"

      svgSprite:
         _default:
         css:
            backend: "EXT:iconpack_fontawesome/Resources/Public/Css/SvgBackend.css"
            ckeditor: "EXT:iconpack_fontawesome/Resources/Public/Css/SvgBackend.css"
            frontend: "EXT:iconpack_fontawesome/Resources/Public/Css/SvgFrontend.css"
         attributes:
            fill: "currentColor"
            role: "img"
         regular:
            source: "EXT:iconpack_fontawesome/Resources/Public/Sprites/regular.svg"
         solid:
            source: "EXT:iconpack_fontawesome/Resources/Public/Sprites/solid.svg"
         brands:
            source: "EXT:iconpack_fontawesome/Resources/Public/Sprites/brands.svg"

      svgInline:
         _default:
            css:
               backend: "EXT:iconpack_fontawesome/Resources/Public/Css/SvgBackend.css"
               ckeditor: "EXT:iconpack_fontawesome/Resources/Public/Css/SvgBackend.css"
               frontend: "EXT:iconpack_fontawesome/Resources/Public/Css/SvgFrontend.css"
            attributes:
               fill: "currentColor"
               role: "img"
         regular:
            source: "EXT:iconpack_fontawesome/Resources/Public/Svg/regular/"
         solid:
            source: "EXT:iconpack_fontawesome/Resources/Public/Svg/solid/"
         brands:
            source: "EXT:iconpack_fontawesome/Resources/Public/Svg/brands/"

   options:
      customCheckbox:
         type: "checkbox"
         label: "My Special Effect"
         attributes:
            class: "fa-special"

      customStyles:
         type: "select"
         label: "Custom CSS-Style"
         values:
         red:
            label: "Red"
            attributes:
               style: "color: red"
         green:
            label: "Green"
            attributes:
               style: "color: green"

   categories: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-5.15.4-web/metadata/categories.yml"

   # The icons in this iconpack (mandatory)
   icons: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-5.15.4-web/metadata/icons.yml"

   # Alternative 1: Use a JSON-file
   #icons: "EXT:iconpack_fontawesome/Resources/Public/Vendor/fontawesome-free-5.15.4-web/metadata/icons.json"

   # Alternative 2: Define the icons as array
   #icons:
   #  - icon1
   #  - icon2
   #  - icon3