[Feature Request] support <Icon> Component

[trydofor]

Describe the feature

like <Badge> component, support <Icon> to show iconfont/fontawesome

Additional context

No response

[Mister-Hope]

Unlike <Badge> is standalone with theme, <Icon> is coupled with theme, and needs global configuration.

Also I personally not found this useful, anyway thanks for your idea, and I extract the icon logic in to a component in 7b14c2d and you should be able to import @theme-hope/components/Icon and register it globally by your own, see https://vuepress-theme-hope.github.io/v2/cookbook/advanced/component.html for more details.

[trydofor]

Also I personally not found this useful,

inline Icon has the same purpose as Badge and Emoji.

<Icon> is coupled with theme

and just expose it will be happy

[trydofor]

temporarily use @vuepress/plugin-register-components register a Component like following

<template>
  <i :class="['icon',  iconPrefix + icon]"></i>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { themeOption } from '../configs/theme';

defineProps<{
  icon: string;
}>();

const iconPrefix = themeOption.iconPrefix || '';
</script>

<style scoped>
</style>

[Mister-Hope]

DO NOT USE THIS.

You can not import vuepress config file as it's working on node side, by doing this, you will include all node side code in your app, and it may break your application.

[trydofor]

Thanks !

i only use the type to define a plain object options, is this ok?

import { HopeThemeOptions } from 'vuepress-theme-hope';

export const themeOption = {
  hostname: 'https://java-code-review.moilioncircle.com',
  author: {
    name: 'trydofor',
    url: 'https://www.trydofor.com',
  },
  // others ....
} as HopeThemeOptions;

[Mister-Hope]

That's ok., but you should use useThemeData to get themedata.

[trydofor]

thx, and waiting for 7b14c2d release

[Mister-Hope]

<FontIcon> is supported since beta.67

[trydofor]

thanks very much, bump to beta71.
and no need global register, just use <FontIcon icon="speed"/>