Icon ​

The XIcon component allows you to easily insert icons within other components or any other area of your pages. Portábilis UI supports out of the box: Material Icons and Font Awesome v4.

Overview ​

type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

type IconTagVariant = 'i' | 'span' | 'img';

type IconDefaultColors =
  | 'standard'
  | 'primary'
  | 'secondary'
  | 'accent'
  | 'success'
  | 'danger'
  | 'warning'
  | 'info';

interface UseIconClassesProps {
  tag?: IconTagVariant;
  name?: string;
  color?: IconDefaultColors;
  left?: boolean;
  right?: boolean;
  size?: IconSize;
}

Size ​

type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

defineProps({
  size: {
    type: String as PropType<IconSize>,
    default: 'xs',
  },
});

Color ​

type IconDefaultColors =
  | 'standard'
  | 'primary'
  | 'secondary'
  | 'accent'
  | 'success'
  | 'danger'
  | 'warning'
  | 'info';

defineProps({
  size: {
    type: String as PropType<IconDefaultColors>,
    default: '',
  },
});

Custom Color ​

Webfont usage ​

<x-icon name="..." />

Naming convention ​

MDI (Material Design Icons) ​

• Icon names are in hyphen-separated case and always begin with “mdi-” prefix.
• Go to MDI, look for your desired icon, click on it. A dialog box will appear. Get the title (eg. “account-key”), prefix it with “mdi-” and you get the result (eg. “mdi-account-key”).

Fontawesome ​

• Icon names are in hyphen-serapated case and always begin with “fa-” prefix.
• Go to FontAwesome, look for your desired icon, click on it. You’ll get to its page. Below the icon name (as title), you will see something like <i class="fa fa-flag"></i>. The result is fa fa-flag (you can also use fa fa-flag).

With Button Usage ​

Dynamic SVG ​

This section component is inspired on Quasar Icons.