scrm.antd/src/pages/ChatLogs/components/EmojiFormat.tsx

import { emoji } from '@/services/config';
import React from 'react';

type IProps = {
  content: string;
};
export const EmojiFormat: React.FC<IProps> = (props) => {
  const format = () => {
    let txt = props.content;
    if (txt.includes('[') && txt.includes(']')) {
      emoji.forEach((item) => {
        const reg = new RegExp(`\\[${item}\\]`, 'g');
        txt = txt.replace(
          reg,
          `<img style="width: 24px;height:24px" src="/api/assets/wechat/emoji/${item}.png" alt="" />`,
        );
      });
    }

    return txt;
  };

  return (
    <>
      {typeof props.content === 'string' ? (
        <span
          style={{ display: 'inline-flex', flexWrap: 'wrap' }}
          dangerouslySetInnerHTML={{ __html: format() }}
        ></span>
      ) : (
        props.content
      )}
    </>
  );
};