Matterway
    Preparing search index...

    Function iconBox

    • Icon box component for displaying icons within a colored container box.

      Parameters

      • props: UiIconBoxProps

        Configuration object

        • icon

          Icon to display. Can be either a static IconKey or a function that receives params with data and value, returning an IconKey

        • size

          Size of the icon box in pixels

        • boxColor

          Background color of the box. Can be either a static string or a function that receives params with data and value, returning a string

        • iconColor

          Color of the icon. Can be either a static string or a function that receives params with data and value, returning a string

        • className

          Additional CSS classes

        • margin

          Margin values

      Returns Element

      Basic usage with static values

      iconBox({
        icon: 'user',
        size: 32,
        boxColor: '#e3f2fd',
        iconColor: '#1976d2'
      });

      Usage with dynamic values from params with data and value

      iconBox({
        icon: ({data}) => data.user.isOnline ? 'user-check' : 'user-x',
        size: 40,
        boxColor: ({data}) => data.user.isOnline ? '#e8f5e8' : '#ffeaea',
        iconColor: ({data}) => data.user.isOnline ? '#4caf50' : '#f44336'
      });

      Usage with large size and margins

      iconBox({
        icon: 'settings',
        size: 48,
        boxColor: '#f5f5f5',
        margin: [16, 8],
        className: 'custom-icon-box'
      });

    Settings