morphemeicons v0.2.0
Morpheme Icons
Basic Usage
The quickest way to use these icons is to simply copy the source for the icon you need from morpheme-icons.vercel.app and inline it directly into your HTML:
<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
Both icon styles are preconfigured to be styleable by setting the color
CSS property, either manually or using utility classes like text-gray-500
in a framework like Tailwind CSS.
React
First, install @morphemeicons/react
from npm:
npm install @morphemeicons/react
Now each icon can be imported individually as a React component:
import { ActivityHeartIcon } from '@morphemeicons/react/untitled'
function MyComponent() {
return (
<div>
<ActivityHeartIcon className="h-6 w-6 text-blue-500"/>
<p>...</p>
</div>
)
}
Icons use an upper camel case naming convention and are always suffixed with the word Icon
.
Browse the full list of icon names on UNPKG →
Vue
Note that this library currently only supports Vue 3.
First, install @morphemeicons/vue
from npm:
npm install @morphemeicons/vue
Now each icon can be imported individually as a Vue component:
<script setup>
import { ActivityHeartIcon } from '@morphemeicons/vue/untitled'
</script>
<template>
<div>
<ActivityHeartIcon class="h-6 w-6 text-blue-500"/>
<p>...</p>
</div>
</template>
Icons use an upper camel case naming convention and are always suffixed with the word Icon
.
Browse the full list of icon names on UNPKG →
License
This library is MIT licensed.
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago