くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Buefyのb-iconをiconifyに置き換えてみる

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いろいろあって便利。。(*´ω`*)