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 isfilled
style. Except for the logo, you can useoutline
andsharp
variants by appending-outline
or-sharp
to thename
.
← Highlight.js PostCSS →