Icon Schema

Introduction

Schemas are structured definitions that describe the format, rules, and relationships of data within a system. They ensure consistency and validate inputs. In Beefree SDK, the Simple Icons Schema defines a block used to display one or more icons alongside optional labels, titles, and links. It allows layout control over icon size, positioning, and interaction behavior. This documentation breaks down the schema's properties, requirements, and usage examples to help you implement and customize icon blocks effectively.

Reference the Simple Schema GitHub repository for more information.

Schema Overview

This section summarizes the purpose and key characteristics of the Simple Icons Schema.

• Schema Name: Simple Icons

• Purpose: Defines icon-based elements with configurable image, text, positioning, and linking.

• Mandatory Fields: image, width, height, textPosition (per icon)

• Related Schemas:

  • definitions.schema.json (for padding definitions)

Structure Definition

Below is the JSON Schema definition and a detailed breakdown of each property.

JSON Schema

{
  "$schema": "http://json-schema.org/draft-07/schema",
  "$id": "simple_icons.schema.json",
  "title": "Simple Icons",
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "type": {
      "const": "icons"
    },
    "icons": {
      "type": "array",
      "items": {
        "type": "object",
        "additionalProperties": false,
        "required": ["image", "textPosition", "width", "height"],
        "properties": {
          "alt": {
            "type": "string"
          },
          "text": {
            "type": "string"
          },
          "title": {
            "type": "string"
          },
          "image": {
            "type": "string",
            "format": "urlOrMergeTags"
          },
          "href": {
            "type": "string",
            "format": "urlOrMergeTags"
          },
          "height": {
            "type": "string"
          },
          "width": {
            "type": "string"
          },
          "target": {
            "enum": ["_blank", "_self", "_top"]
          },
          "textPosition": {
            "enum": ["left", "right", "top", "bottom"]
          }
        }
      }
    },
    "padding-top": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "padding-right": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "padding-bottom": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "padding-left": {
      "$ref": "definitions.schema.json#/definitions/padding"
    },
    "locked": {
      "type": "boolean"
    },
    "customFields": {
      "type": "object"
    }
  }
}

Field Descriptions

The following tables list the field descriptions along with their corresponding data type, whether or not they are mandatory, and their description.

Level 1: simple_icons.schema.json Properties

Property	Type	Mandatory	Description
icons	array	No	The icons array
customFields	object	No	Custom fields for the icons
locked	boolean	No	Whether the module is locked Note: Not available for Single Content AddOn

Level 2: icons Array Properties

Property	Type	Mandatory	Description
image	string	Yes	The URL of the icon image
width	string	Yes	The width of the icon
height	string	Yes	The height of the icon
textPosition	enum	Yes	The position of the text
alt	string	No	The alt text for the icon
text	string	No	The text for the icon
title	string	No	The title of the icon
href	string	No	The URL the icon links to
target	enum	No	The target of the link

Usage Examples

Reference an example of the schema in the following code snippet.

Example Icons

{
  "icons": [
    {
      "alt": "Icon 1",
      "text": "Icon Text 1",
      "title": "Icon Title 1",
      "image": "<https://example.com/icon1.png>",
      "href": "<https://example.com>",
      "height": "24px",
      "width": "24px",
      "target": "_self",
      "textPosition": "left"
    },
    {
      "alt": "Icon 2",
      "text": "Icon Text 2",
      "title": "Icon Title 2",
      "image": "<https://example.com/icon2.png>",
      "href": "<https://example.com>",
      "height": "24px",
      "width": "24px",
      "target": "_self",
      "textPosition": "right"
    }
  ],
  "customFields": {
    "custom1": "value1",
    "custom2": "value2"
  }
}

Additional Considerations

Consider the following when working with the Simple Icons Schema in Beefree SDK:

• Accessibility: Use alt and title fields to improve usability and accessibility.

• Responsiveness: Icons and labels should adapt well in mobile layouts using textPosition.

• Consistency: Ensure icon dimensions (height, width) are aligned for visual harmony.

• Extensibility: Use customFields for non-standard properties.