@fluentui-vue/icons

This is a port of the React @fluentui/font-icons-mdl2 package to Vue.

See the original README for usage. You have to update @fluentui/font-icons-mdl2 to @fluentui-vue/icons

Getting Started

import { initializeIcons } from '@fluentui-vue/icons';

// Register icons and pull the fonts from the default SharePoint cdn.
initializeIcons();

// ...or, register icons and pull the fonts from your own cdn:
initializeIcons('https://my.cdn.com/path/to/icons/');

Usage in code

Icon component

<template>
  <FluentIcon icon-name="Snow" />
</template>

<script lang="ts">
import Vue from 'vue'
import { Icon } from '@fluentui-vue/components';

export default Vue.extend({
  components: {
    FluentIcon: Icon,
  }
})
</script>

getIconClassName API

<template>
  <i :class="getIconClassName('Snow')" />
</template>

<script lang="ts">
import Vue from 'vue'
import { getIconClassName } from '@fluentui/style-utilities';

export default Vue.extend({
  methods: {
    getIconClassName: getIconClassName
  }
})
</script>

@fluentui/font-icons-mdl2

Icons for Fluent UI React ([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/> ui-fabric-is-evolving-into-fluent-ui/))

Fluent UI React Icons includes a collection of 1100+ icons which you can use in your > application.

Getting started

If you are using Fluent UI React components, you can make all icons available by > calling the initializeIcons function from the @fluentui/font-icons-mdl2 package:

import { initializeIcons } from '@fluentui/font-icons-mdl2';

// Register icons and pull the fonts from the default SharePoint cdn.
initializeIcons();

// ...or, register icons and pull the fonts from your own cdn:
initializeIcons('https://my.cdn.com/path/to/icons/');

This will make ALL icons in the collection available, but will download them on demand > when referenced using the @fluentui/style-utilities APIs getIcon or > getIconClassName.

Usage in code

Icon component

If you are using Fluent UI React, you can use the Icon component and pass in the > corresponding iconName property to render a given icon.

import { Icon } from '@fluentui/react/lib/Icon';

<Icon iconName="Snow" />;

getIconClassName API

The @fluentui/style-utilities package includes a getIconClassName API which can > provide a css class to use for rendering the icon manually using the :before > pseudoselector:

import { getIconClassName } from '@fluentui/style-utilities';

return `<i class="${getIconClassName('Snow')}" />`;

Notes

See GitHub for more details on the Fluent UI React project and packages within.