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!