Installation

This NPM package will allow you to use the Codey Icons. Imported Icons can be used with the XerIcon component.

npm i @xerius/codey-icons

Use Icons

To import the icons to use them inside the XerIcon component you can use the xerIconsPlugin found in the @xerius/codey-icons package.

Vue.js

Registering all icons in your application can be done as followed:

// main.js
import Vue from "vue";
import xerIconsPlugin from "@xerius/codey-icons";

Vue.use(xerIconsPlugin);

When you only want to register a certain set of icons you can provide them as a parameter to the xerIconsPlugin:

// main.js
import Vue from "vue";
import xerIconsPlugin, { XerXeriusLogo, XerXeriusLogoColor } from "@xerius/codey-icons";

Vue.use(xerIconsPlugin, {
  icons: {
    XerXeriusLogo,
    XerXeriusLogoColor,
  },
});

The registration of the plugin needs to be done before the Vue app is mounted.

Nuxt.js

The plugin can also then be set in the nuxt.config.js Inside the @xerius/codey-nuxt-utils there is a module for XerIcons, which can be found under @xerius/codey-nuxt-utils/build/modules.

This module will add the xerIconsPlugin to your Nuxt.js application. It accepts the same icon options which you can add in the nuxt.config.js file.

import { xerXeriusLogo, xerXeriusLogoColor } from "@xerius/codey-icons";
export default {
  ...
  modules: [
    '@xerius/codey-nuxt-utils/build/modules/xer-icons.js'
  ],
  xerIcons: {
    icons: {
      xerXeriusLogo,
      xerXeriusLogoColor
    }
  }
  ...
}

Overview