astro-emoji

1.2.0 • Public • Published

astro-emoji

npm npm bundle size (minified) npm

🚀 An accessible Emoji component for Astro applications

Why?

Emojis can add a light playfulness to your project but require some specific formatting in order to ensure they are accessible for all users. astro-emoji's reusable Emoji component helps you do that quickly and painlessly.

Installation

Add astro-emoji to your project:

npm install astro-emoji
# or
yarn add astro-emoji

Use

Import the default Emoji from astro-emoji and add it to your code:

---
import Emoji from 'astro-emoji':
---

<footer>
    Made with
    {' '}
    <Emoji symbol="💕" label="love" />
    {' '}
    by Sean McPherson
</footer>

The resulting markup for that component signature will be:

<span aria-label="love" role="img">💕</span>

Emojis with no label prop are rendered with aria-hidden="true":

<Emoji symbol="🤐" />
<!-- Renders -->
<span aria-hidden="true" role="img">🤐</span>

Emoji component

The Emoji component consumes two props: symbol and label. Every other prop is spread to the top-level <span> element.

Forbidden properties

The following properties are managed internally, and therefore ignored if passes as props to Emoji:

  • aria-hidden
  • aria-label
  • role

The main benefit of using astro-emoji is that you don't need to worry about setting these HTML attributes correctly yourself.

License

MIT

Package Sidebar

Install

npm i astro-emoji

Weekly Downloads

22

Version

1.2.0

License

MIT

Unpacked Size

4.23 kB

Total Files

4

Last publish

Collaborators

  • seanmcp