t-icon

This is a comprehensive icon component designed to suite many use cases.

Use it to render icons with three possible methods.

  1. Name of the component to be fetched from Iconify.
  2. Path of the SVG icon.
  3. A custom component.

Iconify

Recommended

Material Design Icons

Font Awesome Solid

Icon Park Outline

SVG Logos

SVG Spinners

You can pass a name of an icon from +100 sets of icons with thousands of options available via Iconify.

We suggest to search for an icon using the Icônes icons search engine.

Internally, it uses t-iconify to render this method.

import { TIcon } from "@dija/tohama-components";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return () => (
      <TIcon
        icon="mdi:account-circle-outline" //
      />
    );
  },
});

Path

You can also pass an SVG path to render your icon. Simply pass your own SVG path or import it from a third-party library such as @mdi/js.

Internally, it uses t-svg-icon to render this method.

import { TIcon } from "@dija/tohama-components";
import { mdiAccountCircle } from "@mdi/js";
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return () => (
      <TIcon
        icon={mdiAccountCircle} //
      />
    );
  },
});

Custom Component

You can also pass a custom component as an icon. First, add the component to your vue app and assign an alias.

import { createApp } from "vue";
import MyLogo from "./components/my-logo";

const app = createApp("#app");

app.component("my-logo", MyLogo);

Then, pass the the component's alias name to the icon property.

<TIcon
  class="flex items-center"
  icon="my-logo"
  logo // component options
/>

Sizes

<TIcon
  icon="mdi:home"
  size="74" //
/>

Colors

<TIcon
  icon="mdi:earth"
  color="success" //
/>

Custom Colors

<TIcon
  icon="mdi:check-circle-outline"
  class="text-sky-800" //
/>

Usage with components

Create Account
<TButton
  icon="mdi:account-circle-outline"
  design="raised"
  size="lg"
  to="/" //
>
  Create Account
</TButton>

<TIconButton
  icon="mdi:account-circle-outline"
  design="raised"
  size="lg"
  to="/" //
/>

API

No options available

Buttons

t-icon-button

Icons

t-iconify

Table of Contents