intro

有如下工具类，返回了一个 render 函数使用h创建了vnode

import { h } from 'vue';
import SvgIcon from '@/components/custom/SvgIcon.vue';

/**
 * 图标渲染
 * - 用于 vue 的 render 函数
 */
export const useIconRender = () => {
  interface IconConfig {
    /**
     * 图标名称(iconify 图标的名称)
     * - 例如：mdi-account 或者 mdi:account
     */
    icon?: string;
    /**
     * 本地 svg 图标文件名(assets/svg-icon 文件夹下)
     */
    localIcon?: string;
    /** 图标颜色 */
    color?: string;
    /** 图标大小 */
    fontSize?: number;
  }

  interface IconStyle {
    color?: string;
    fontSize?: string;
  }

  /**
   * 图标渲染
   * @param config
   * @property icon - 图标名称(iconify 图标的名称), 例如：mdi-account 或者 mdi:account
   * @property localIcon - 本地 svg 图标文件名(assets/svg-icon 文件夹下)
   * @property color - 图标颜色
   * @property fontSize - 图标大小
   */
  const iconRender = (config: IconConfig) => {
    const { color, fontSize, icon, localIcon } = config;

    const style: IconStyle = {};

    if (color) {
      style.color = color;
    }
    if (fontSize) {
      style.fontSize = `${fontSize}px`;
    }

    if (!icon && !localIcon) {
      window.console.warn('没有传递图标名称，请确保给 icon 或 localIcon 传递有效值!');
    }

    return () => h(SvgIcon, { icon, localIcon, style });
  };

  return {
    iconRender
  };
};

question

在我的组件里使用了这个函数

  const icon = useIconRender();
  const node = icon.iconRender({ icon: "ant-design:vertical-left" });

可是我要怎么把这个东西渲染到页面上呢？

Q: vue 的 vnode 如何渲染到 template 里？

intro

question