Icon

Icon Props

Name	Type	Default	Description
badge	string		Icon badge
badgeColors	object		Badge colors. Object with Tailwind CSS colors classes
badgeColors.bg	string	'bg-primary'	Badge bg color
badgeColors.text	string	'text-white'	Badge text color
component	string	'i'	Component's HTML Element
ios	string		Icon to render in "ios" theme
material	string		Icon to render in "material" theme

Icon Slots

Name	Description
badge	Icon badge
ios	Icon to render in "ios" theme
material	Icon to render in "material" theme

Examples

Vue

<template>
  <i-page>
    <i-navbar title="Badge">
      
      <template #right>
        <i-link navbar icon-only>
          <i-icon badge="5" :badge-colors="{ bg: 'bg-red-500' }">
            <template #ios><PersonCircleFill class="w-7 h-7" /></template>
            <template #material><MdPerson class="w-6 h-6" /></template>
          </i-icon>
        </i-link>
      </template>
    </i-navbar>
    <i-tabbar labels icons class="left-0 bottom-0 fixed">
      <i-tabbar-link active label="Inbox">
        <template #icon>
          <i-icon badge="5" :badge-colors="{ bg: 'bg-green-500' }">
            <template #ios>
              <EnvelopeFill class="w-7 h-7" />
            </template>
            <template #material>
              <MdEmail class="w-6 h-6" />
            </template>
          </i-icon>
        </template>
      </i-tabbar-link>
      <i-tabbar-link label="Calendar">
        <template #icon>
          <i-icon badge="7" :badge-colors="{ bg: 'bg-red-500' }">
            <template #ios>
              <Calendar class="w-7 h-7" />
            </template>
            <template #material>
              <MdToday class="w-6 h-6" />
            </template>
          </i-icon>
        </template>
      </i-tabbar-link>
      <i-tabbar-link label="Upload">
        <template #icon>
          <i-icon badge="1" :badge-colors="{ bg: 'bg-red-500' }">
            <template #ios>
              <CloudUploadFill class="w-7 h-7" />
            </template>
            <template #material>
              <MdFileUpload class="w-6 h-6" />
            </template>
          </i-icon>
        </template>
      </i-tabbar-link>
    </i-tabbar>
    <i-list strong inset>
      <i-list-item title="Foo Bar">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge :colors="{ bg: 'bg-gray-500' }">0</i-badge>
        </template>
      </i-list-item>

      <i-list-item title="Ivan Petrov">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge>CEO</i-badge>
        </template>
      </i-list-item>

      <i-list-item title="John Doe">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge :colors="{ bg: 'bg-green-500' }">5</i-badge>
        </template>
      </i-list-item>

      <i-list-item title="Jane Doe">
        <template #media>
          <demo-icon />
        </template>
        <template #after>
          <i-badge :colors="{ bg: 'bg-yellow-500' }">NEW</i-badge>
        </template>
      </i-list-item>
    </i-list>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBadge,
    iIcon,
    iLink,
    iList,
    iListItem,
    iTabbar,
    iTabbarLink,
  } from 'ina-ui/vue';
  import {
    PersonCircleFill,
    EnvelopeFill,
    Calendar,
    CloudUploadFill,
  } from 'framework7-icons/vue';
  import MdPerson from '../components/MdPerson.vue';
  import MdEmail from '../components/MdEmail.vue';
  import MdToday from '../components/MdToday.vue';
  import MdFileUpload from '../components/MdFileUpload.vue';
  import DemoIcon from '../components/DemoIcon.vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBadge,
      iIcon,
      iLink,
      iList,
      iListItem,
      iTabbar,
      iTabbarLink,

      PersonCircleFill,
      EnvelopeFill,
      Calendar,
      CloudUploadFill,
      MdPerson,
      MdEmail,
      MdToday,
      MdFileUpload,
      DemoIcon,
    },

  };
</script>

React

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Badge,
  Icon,
  Link,
  List,
  ListItem,
  Tabbar,
  TabbarLink,
} from 'ina-ui/react';
import {
  PersonCircleFill,
  EnvelopeFill,
  Calendar,
  CloudUploadFill,
} from 'framework7-icons/react';
import { MdPerson, MdEmail, MdToday, MdFileUpload } from 'react-icons/md';
import DemoIcon from '../components/DemoIcon';

export default function BadgePage() {
  return (
    <Page>
      <Navbar
        title="Badge"
        right={
          <Link navbar iconOnly>
            <Icon
              ios={<PersonCircleFill className="w-7 h-7" />}
              material={<MdPerson className="w-6 h-6" />}
              badge="5"
              badgeColors={{ bg: 'bg-red-500' }}
            />
          </Link>
        }
      />
      <Tabbar labels icons className="left-0 bottom-0 fixed">
        <TabbarLink
          active
          icon={
            <Icon
              ios={<EnvelopeFill className="w-7 h-7" />}
              material={<MdEmail className="w-6 h-6" />}
              badge="5"
              badgeColors={{ bg: 'bg-green-500' }}
            />
          }
          label="Inbox"
        />
        <TabbarLink
          icon={
            <Icon
              ios={<Calendar className="w-7 h-7" />}
              material={<MdToday className="w-6 h-6" />}
              badge="7"
              badgeColors={{ bg: 'bg-red-500' }}
            />
          }
          label="Calendar"
        />
        <TabbarLink
          icon={
            <Icon
              ios={<CloudUploadFill className="w-7 h-7" />}
              material={<MdFileUpload className="w-6 h-6" />}
              badge="1"
              badgeColors={{ bg: 'bg-red-500' }}
            />
          }
          label="Upload"
        />
      </Tabbar>
      <List strong inset>
        <ListItem
          media={<DemoIcon />}
          title="Foo Bar"
          after={<Badge colors={{ bg: 'bg-gray-500' }}>0</Badge>}
        />

        <ListItem
          media={<DemoIcon />}
          title="Ivan Petrov"
          after={<Badge>CEO</Badge>}
        />

        <ListItem
          media={<DemoIcon />}
          title="John Doe"
          after={<Badge colors={{ bg: 'bg-green-500' }}>5</Badge>}
        />

        <ListItem
          media={<DemoIcon />}
          title="Jane Doe"
          after={<Badge colors={{ bg: 'bg-yellow-500' }}>NEW</Badge>}
        />
      </List>
    </Page>
  );
}