joypixels / emoji-toolkit

The world's largest independent emoji font.
https://www.joypixels.com
Other
434 stars 47 forks source link

I think it would be good to add a react example #45

Open hmmhmmhm opened 3 years ago

hmmhmmhm commented 3 years ago

First of all, thank you for developing a good project. I succeeded in applying joypixels in react, and I want to share components.

EmojiAsset.tsx

import joypixels from 'emoji-toolkit'

const EmojiAsset = (props: { emoji: string }) => {
  const html = () => {
    const styles = [
      `width: 1.2em`,
      `height: 1.2em`,
      'top: -1px',
      'position: relative'
    ]
    const html: string = (joypixels.toImage(props.emoji) as string)
      .split(`<img class="joypixels"`)
      .join(`<img class="joypixels" style="${styles.join(';')}"`)

    return { __html: html }
  }

  return (
    <span
      className="emojiAsset"
      style={{ display: 'inline-block' }}
      dangerouslySetInnerHTML={html()}
    />
  )
}

export default EmojiAsset

index.tsx

const SomePage = () => {
  return (
    <EmojiAsset emoji="📦 Module" />
  )
}

export default SomePage

Example

스크린샷 2021-05-28 오후 7 03 44