Nuxt2のプロジェクトのNuxt3化をしてる途中。
nuxt-modules/iconが使いたいけど、
Nuxt2には対応していないよう。。
とりあえず、Nuxt2でIconifyを使える用意して、
Buefyのb-iconを置き換えれるようにしたときの備忘録。
iconifyの導入
インストール
$ npm install --save-dev @iconify/vue2
プラグインの作成
// plugins/iconify.ts import { Icon } from "@iconify/vue2"; import Vue from "vue"; Vue.component("Icon", Icon);
プラグインの有効化
// nuxt.config.ts import { NuxtConfig } from "@nuxt/types"; const config: NuxtConfig = { // ... plugins: [ // ... { src: "~/plugins/iconify.ts", mode: "client" }, ], // ... }; export default config;
使い方
<!-- <b-icon icon="bell" class="mr-1" custom-size="mdi-18px" /> --> <Icon icon="mdi:bell" class="tw-mr-1 tw-h-[18px] tw-w-[18px]" />
Buefyとiconifyの違い
コンテナがなく、直でSVGを配置
<!-- <b-icon icon="bell" class="mr-1" custom-size="mdi-18px" /> --> <span class="icon mr-1"> <i class="mdi mdi-bell mdi-18px"> <!-- ::before(font-size: 18px; content: "\F009A";) --> </i> </span> <!-- <Icon icon="mdi:bell" class="tw-mr-1 tw-h-[18px] tw-w-[18px]" /> --> <svg class="tw-mr-1 tw-h-[18px] tw-w-[18px] iconify iconify--mdi"> </svg>
置き換え用のコンポーネント(CICon.vue
)
<b-icon />
を置き換えるためのコンポーネントを用意。
<!-- CICon.vue --> <template> <span class="c-icon" :class="{ [props.size]: !!props.size }"> <Icon :icon="iconName" :class="props.customSize" /> </span> </template> <script lang="ts" setup> import { computed } from 'vue'; interface Prop { icon: string; customSize: string; size: string; } const props = defineProps<Prop>(); const iconName = computed(() => `mdi:${props.icon}`) </script> <style lang="postcss"> /* ref: https://bulma.io/documentation/elements/icon/#material-design-icons */ .c-icon { /* buefy container size */ user-select: none; align-items: center; display: inline-flex; justify-content: center; height: 1.5rem; width: 1.5rem; &.is-small { height: 1rem; width: 1rem; } &.is-medium { height: 2rem; width: 2rem; } &.is-large { height: 3rem; width: 3rem; } /* buefy icon size */ .iconify { height: 18px; width: 18px; &.mdi-18px { height: 18px; width: 18px; } &.mdi-24px { height: 24px; width: 24px; } &.mdi-36px { height: 36px; width: 36px; } &.mdi-48px { height: 48px; width: 48px; } } } </style>
サイズやパラメタは以下を参照。
あとは置き換えればOK
<template> - <b-icon icon="bell" class="mr-1" custom-size="mdi-18px" /> + <c-icon icon="bell" class="mr-1" custom-size="mdi-18px"/> </template>
必要なpropsなどを追加していけば、簡単に置き換えれそう(*´ω`*)
以上!iconifyいろいろあって便利。。(*´ω`*)