> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# مربع الأيقونة الملونة

> أيقونة على خلفية ملوّنة مشتقة من لون النسق.

## نظرة عامة

مرّر محتوى الأيقونة عبر فتحة العقدة `icon` المكتوبة بأحرف صغيرة. تستمد البلاطة لون خلفيتها ولون المقدمة الموروث من لوحة ألوان النسق. محتوى الأيقونة زخرفي. أبقِ تسمية مرئية بجانبها، أو امنح الجذر `role="img"` واسمًا متاحًا لصورة مستقلة ذات تسمية.

**Light**

[أيقونة الشركة على لوحة ملوّنة (light)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-tintedicontile--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[أيقونة الشركة على لوحة ملوّنة (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-data-display-tintedicontile--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-data-display-tintedicontile--display)

## استخدام

```tsx theme={null}
import { TintedIconTile } from 'twenty-ui/components/data-display';
import { IconBuildingSkyscraper } from 'twenty-ui/icon';
import { Text } from 'twenty-ui/primitives/typography';

export const CompanyLabel = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <TintedIconTile icon={<IconBuildingSkyscraper size={16} />} color="blue" />
    <Text>Companies</Text>
  </Text>
);
```

## الهندسة والتركيب الأصلي

تستخدم البلاطة افتراضيًا قيمة 16px عبر رمز التباعد، وتستخدم رمز نصف قطر الحد الصغير. اضبط أبعاد الأيقونة وسمك الخط على العقدة نفسها. يتحكم `style` أو `className` الخاص بالجذر في عرض البلاطة وارتفاعها وحدودها وشكلها وألوانها؛ وتتجاوز الأنماط الصريحة الإعدادات الافتراضية للوحة الألوان. يجب أن يرث العمل الفني المخصص `currentColor` عند استخدامه لون المقدمة من لوحة الألوان.

```tsx theme={null}
import { TintedIconTile } from 'twenty-ui/components/data-display';

export const CustomCompanyTile = () => (
  <TintedIconTile
    icon={
      <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
        <path d="M2 2h16v16H2z" />
      </svg>
    }
    color="blue"
    role="img"
    aria-label="Companies"
    render={<span />}
    style={{ width: 32, height: 32 }}
  />
);
```

تستهدف السمات والأحداث الأصلية و`className` و`style` و`ref` عنصر div الخارجي. يستبدل `render` ذلك الهدف عبر تركيب Base UI مع الحفاظ على محتوى الأيقونة الزخرفي. سمِّ عنصر التحكم المحيط عند تضمين بلاطة في إجراء.

استبدل `Icon={CompanyIcon}` بـ `icon={<CompanyIcon size={16} />}`. انقل خياري `size` و`stroke` السابقين إلى عقدة الأيقونة، واستخدم أنماط الجذر لأبعاد البلاطة المخصصة.

## الخصائص

**className** `string`

CSS class applied to the tile root.

**color** `string | null` (default: gray)

Theme palette name used to derive the background and foreground shades. Invalid names use the default theme color.

**icon** `ReactNode` *required*

Decorative icon content. The caller controls its dimensions and stroke.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replaces the div root while preserving icon content and native props.

**style** `CSSProperties`

Inline styles override tile geometry and palette defaults.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.