#Emoji shortcodes
EmojiPlugin converts GitHub-style emoji shortcodes such as :smile: and :+1: into Unicode emoji. The Full components for React, Vue, Svelte, Angular, React Native, Lynx, Solid, and Taro include it by default; Lite components can add it as needed.
import { Fluxdown } from 'fluxdown';
export function Message() {
return <Fluxdown text="Hello :smile: Great work :+1:" />;
}<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';
</script>
<template>
<Fluxdown text="Hello :smile: Great work :+1:" />
</template><script lang="ts">
import { Fluxdown } from '@fluxdown/svelte';
</script>
<Fluxdown text="Hello :smile: Great work :+1:" />import { Component } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';
@Component({
selector: 'app-message',
imports: [Fluxdown],
template: `<fluxdown text="Hello :smile: Great work :+1:" />`,
})
export class Message {}import { Fluxdown } from '@fluxdown/react-native';
export function Message() {
return <Fluxdown text="Hello :smile: Great work :+1:" />;
}import { Fluxdown } from '@fluxdown/lynx';
export function Message() {
return <Fluxdown text="Hello :smile: Great work :+1:" />;
}import { Fluxdown } from '@fluxdown/solid';
export function Message() {
return <Fluxdown text="Hello :smile: Great work :+1:" />;
}import { Fluxdown } from '@fluxdown/taro';
export function Message() {
return <Fluxdown text="Hello :smile: Great work :+1:" />;
}The output is “Hello 😄 Great work 👍”. Emoji use the system font, so their appearance depends on the device.
#Supported content
Shortcodes are converted in Markdown text, including headings, lists, tables, and link labels. Unknown shortcodes and unfinished input such as :smile remain unchanged. During streaming, a recognized shortcode becomes an emoji when its closing colon arrives.
Inline code and fenced code blocks preserve their source. For example, `:smile:` displays :smile: rather than an emoji.
#Import the plugin
All Full components include EmojiPlugin without manual registration. For Core or a Lite component, install the matching plugin package:
pnpm add @fluxdown/core-pluginspnpm add @fluxdown/react-base-pluginspnpm add @fluxdown/vue-pluginspnpm add @fluxdown/svelte-pluginspnpm add @fluxdown/angular-pluginspnpm add @fluxdown/react-base-pluginspnpm add @fluxdown/lynx-pluginspnpm add @fluxdown/solid-pluginspnpm add @fluxdown/react-base-pluginsFor Core, add EmojiRemarkPlugin to the remarks input in the quick start. Components extend their presets through plugins:
import { EmojiRemarkPlugin } from '@fluxdown/core-plugins/plugins/remark/emoji';
const remarks = [EmojiRemarkPlugin];import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { FluxdownLite } from 'fluxdown/lite';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return <FluxdownLite plugins={EmojiPlugin} text={text} />;
}<script setup lang="ts">
import { EmojiPlugin } from '@fluxdown/vue-plugins/plugins/emoji';
import { FluxdownLite } from '@fluxdown/vue/lite';
defineProps<{ text: string }>();
</script>
<template>
<FluxdownLite :plugins="EmojiPlugin" :text="text" />
</template><script lang="ts">
import { EmojiPlugin } from '@fluxdown/svelte-plugins/plugins/emoji';
import { FluxdownLite } from '@fluxdown/svelte/lite';
type MessageProps = {
text: string;
};
let { text }: MessageProps = $props();
</script>
<FluxdownLite plugins={EmojiPlugin} {text} />import { Component, input } from '@angular/core';
import { FluxdownLite } from '@fluxdown/angular/lite';
import { EmojiPlugin } from '@fluxdown/angular-plugins/plugins/emoji';
@Component({
selector: 'app-message',
imports: [FluxdownLite],
template: `<fluxdown-lite [plugins]="plugins" [text]="text()" />`,
})
export class Message {
readonly text = input.required<string>();
readonly plugins = EmojiPlugin;
}import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { FluxdownLite } from '@fluxdown/react-native/lite';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return <FluxdownLite plugins={EmojiPlugin} text={text} />;
}import { EmojiPlugin } from '@fluxdown/lynx-plugins/plugins/emoji';
import { FluxdownLite } from '@fluxdown/lynx/lite';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return <FluxdownLite plugins={EmojiPlugin} text={text} />;
}import { EmojiPlugin } from '@fluxdown/solid-plugins/plugins/emoji';
import { FluxdownLite } from '@fluxdown/solid/lite';
type MessageProps = {
text: string;
};
export function Message(props: MessageProps) {
return <FluxdownLite plugins={EmojiPlugin} text={props.text} />;
}import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { FluxdownLite } from '@fluxdown/taro/lite';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return <FluxdownLite plugins={EmojiPlugin} text={text} />;
}#Disable conversion
Include EmojiPlugin and config in the same plugin pack to disable this behavior. Core uses a remark plugin entry with disabled set:
import type { IPluggable, IRemarkPlugin } from '@fluxdown/types';
import { EmojiRemarkPlugin } from '@fluxdown/core-plugins/plugins/remark/emoji';
const remarks: IPluggable<IRemarkPlugin, unknown>[] = [
[EmojiRemarkPlugin, { disabled: true }],
];import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { Fluxdown } from 'fluxdown';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return (
<Fluxdown
plugins={{
...EmojiPlugin,
config: { 'remark-emoji': { disabled: true } },
}}
text={text}
/>
);
}<script setup lang="ts">
import { EmojiPlugin } from '@fluxdown/vue-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/vue';
const plugins = {
...EmojiPlugin,
config: { 'remark-emoji': { disabled: true } },
};
defineProps<{ text: string }>();
</script>
<template>
<Fluxdown :plugins="plugins" :text="text" />
</template><script lang="ts">
import { EmojiPlugin } from '@fluxdown/svelte-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/svelte';
const plugins = {
...EmojiPlugin,
config: { 'remark-emoji': { disabled: true } },
};
type MessageProps = {
text: string;
};
let { text }: MessageProps = $props();
</script>
<Fluxdown {plugins} {text} />import type { IPluginItem } from '@fluxdown/angular-plugins/typings';
import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';
import { EmojiPlugin } from '@fluxdown/angular-plugins/plugins/emoji';
@Component({
selector: 'app-message',
imports: [Fluxdown],
template: `<fluxdown [plugins]="plugins" [text]="text()" />`,
})
export class Message {
readonly text = input.required<string>();
readonly plugins: IPluginItem = {
...EmojiPlugin,
config: { 'remark-emoji': { disabled: true } },
};
}import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/react-native';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return (
<Fluxdown
plugins={{
...EmojiPlugin,
config: { 'remark-emoji': { disabled: true } },
}}
text={text}
/>
);
}import { EmojiPlugin } from '@fluxdown/lynx-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/lynx';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return (
<Fluxdown
plugins={{
...EmojiPlugin,
config: { 'remark-emoji': { disabled: true } },
}}
text={text}
/>
);
}import { EmojiPlugin } from '@fluxdown/solid-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/solid';
type MessageProps = {
text: string;
};
export function Message(props: MessageProps) {
return (
<Fluxdown
plugins={{
...EmojiPlugin,
config: { 'remark-emoji': { disabled: true } },
}}
text={props.text}
/>
);
}import { EmojiPlugin } from '@fluxdown/react-base-plugins/plugins/emoji';
import { Fluxdown } from '@fluxdown/taro';
type MessageProps = {
text: string;
};
export function Message({ text }: MessageProps) {
return (
<Fluxdown
plugins={{
...EmojiPlugin,
config: { 'remark-emoji': { disabled: true } },
}}
text={text}
/>
);
}