https://github.com/seanmcp/astro-emoji

🚀 An accessible Emoji component for Astro applications
https://github.com/seanmcp/astro-emoji

a11y accessibility astro astro-component emoji

Last synced: about 1 month ago
JSON representation

🚀 An accessible Emoji component for Astro applications

• Host: GitHub
• URL: https://github.com/seanmcp/astro-emoji
• Owner: SeanMcP
• License: mit
• Created: 2022-09-23T13:38:21.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2022-12-01T13:58:07.000Z (about 2 years ago)
• Last Synced: 2024-09-14T21:50:45.456Z (3 months ago)
• Topics: a11y, accessibility, astro, astro-component, emoji
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/astro-emoji
• Size: 365 KB
• Stars: 17
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-astro - astro-emoji

README

        
# astro-emoji

[![npm](https://img.shields.io/npm/v/astro-emoji.svg)](https://npmjs.com/package/astro-emoji) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/astro-emoji.svg)](https://npmjs.com/package/astro-emoji) [![npm](https://img.shields.io/npm/dt/astro-emoji.svg)](https://npmjs.com/package/astro-emoji)

🚀 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:

```sh

npm install astro-emoji

# or

yarn add astro-emoji

```

## Use

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

```astro

---

import Emoji from 'astro-emoji';

---

    Made with

    {' '}

    

    {' '}

    by Sean McPherson

```

The resulting markup for that component signature will be:

```html

💕

```

`Emoji`s with no `label` prop are rendered with `aria-hidden="true"`:

```astro

🤐

```

## Emoji component

The `Emoji` component consumes two props: `symbol` and `label`. Every other prop is spread to the top-level `` 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](/LICENSE)