How to Use Ionicons in a Nuxt Project demo repo

Ionicons (opens new window) is an icon set for Ionic Framework and web apps.

# 👣 Steps

Create a Nuxt project with npx create-nuxt-app nuxt-demo.
Register the script in nuxt.config.js.

export default {
  head: {
    script: [
      {
        type: "module",
        src: "https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"
      },
      {
        nomodule: "",
        src: "https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"
      }
    ]
  }
};

Use Ionicons, e.g. in pages/ionicons.vue.

<template>
  <div>
    <h1>Ionicons Demo</h1>

    <b-table-simple striped>
      <b-thead>
        <b-tr>
          <b-th
            v-for="(item, index) in titles"
            :key="index"
            class="text-center"
          >
            {{ item }}
          </b-th>
        </b-tr>
      </b-thead>

      <b-tbody>
        <b-tr v-for="(item, index) in ionicons" :key="index">
          <b-td>{{ item }}</b-td>

          <b-td class="text-center text-primary">
            <ion-icon :name="item" size="large" />
          </b-td>

          <b-td class="text-center text-secondary">
            <ion-icon
              v-if="!item.includes('logo-')"
              :name="`${item}-outline`"
              size="large"
            />
          </b-td>

          <b-td class="text-center text-success">
            <ion-icon
              v-if="!item.includes('logo-')"
              :name="`${item}-sharp`"
              size="large"
            />
          </b-td>
        </b-tr>
      </b-tbody>
    </b-table-simple>
  </div>
</template>

<script>
import { icons } from "@/assets/ionicons";

export default {
  data() {
    return {
      titles: ["Name", "Filled", "Outline", "Sharp"],
      ionicons: icons
    };
  }
};
</script>

In assets/ionicons.js:

const icons = [
  "add",
  "add-circle",
  "airplane",
  ...
]

export { icons };

# 📖 Explanation

Use icons (opens new window) with ion-icon.
Specify the icon with name attribute.
For example, to insert a heart icon write <ion-icon name="heart" />. The default is filled style. Except for the logo, you can use outline and sharp variants by appending -outline or -sharp to the name.

← Highlight.js PostCSS →