Experimental web component for displaying accessible Emoji
Use <magic-emoji> by passing a text property to the component. This will
output an Emoji that best matches the text and provide a helpful aria-label
with a human-readable description for screen readers and other assistive technologies.
Alternatively, <magic-emoji> also accepts an icon prop that lets you specify
the Emoji being displayed. In that case, the component will simply add a description.
<!DOCTYPE html>
<html>
<head>
<script type="module" src="https://unpkg.com/magic-emoji@latest"></script>
</head>
<body>
<magic-emoji text="bug"></magic-emoji>
</body>
</html><magic-emoji> requires one of either text or icon to be passed as a prop.
| Name | Type | Example |
|---|---|---|
text |
String | text="rocket" |
icon |
String (emoji) | icon="🚀" |
This project is open to and encourages contributions! Feel free to discuss any bug fixes/features in the issues. If you wish to work on this project:
- Fork this project
- Create a branch (
git checkout -b new-branch) - Commit your changes (
git commit -am 'add new feature') - Push to the branch (
git push origin new-branch) - Submit a pull request!