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