NuxtUI的UHorizontalNavigation从Pinia取links时图标不显示问题

问题描述 #

使用NuxtUI的UHorizontalNavigation组件时，直接在组件内部定义links数组并传入组件，图标能正常渲染；但将links数组迁移到专属Pinia Store后，组件仅显示导航文字，图标完全不显示。

代码示例 #

正常工作的组件代码 #

<template>
  <UHorizontalNavigation :links="links"></UHorizontalNavigation>
</template>

<script setup lang="ts">
interface ILayoutState {
  icon?: string;
  label: string;
  to: string;
}

const links = [
  [
    {
      icon: 'i-heroicons-home-solid',
      label: 'Home',
      to: '/',
    },
    {
      icon: 'i-heroicons-book-open-solid',
      label: 'Product',
      to: '/product',
    },
  ],
  [
    {
      icon: 'i-heroicons-user-circle-solid',
      label: 'Login',
      to: '/login',
    },
  ],
] as ILayoutState[][];
</script>

图标不显示的组件代码 #

<template>
  <UHorizontalNavigation :links="links"></UHorizontalNavigation>
</template>

<script setup lang="ts">
const layoutStore = useLayoutStore();
const links = computed(() => layoutStore.links);
</script>

对应的Pinia Store代码 #

import { defineStore } from 'pinia';

interface ILayoutState {
  icon?: string;
  label: string;
  to: string;
}

export const useLayoutStore = defineStore('layoutStore', {
  state: () => ({
    links: [
      [
        {
          icon: 'i-heroicons-home-solid',
          label: 'Home',
          to: '/',
        },
        {
          icon: 'i-heroicons-book-open-solid',
          label: 'Product',
          to: '/product',
        },
      ],
      [
        {
          icon: 'i-heroicons-user-circle-solid',
          label: 'Login',
          to: '/login',
        },
      ],
    ] as ILayoutState[][],
  }),
  getters: {},
  actions: {},
});

解决方案 #

在项目根目录的app.config.ts中添加如下配置，启用动态图标支持即可解决该问题：

export default defineAppConfig({
  ui: {
    icons: {
      dynamic: true
    }
  }
})

内容的提问来源于stack exchange，提问作者g4rf4z