アイコン

文中でアイコンを自然に使えるようにした。

Iconコンポーネント内でinline-iconクラスを指定すると良い感じになる。

import { Icon } from 'astro-iconify'
文中で <Icon name="fluent-emoji-flat:rocket" class="inline-icon" /> を使う

ノート

表示結果：文中で を使う

inline-iconクラスの設定

src/styles/custom.css

.inline-icon {
  display: inline;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}