Package Guide
Rayna UI Components are interactive building blocks for creating a user interface. Browse all components or select a specific platform.
Rayna
Implementation of the Rayna icon library for web applications.
Installation
Package Managers
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
CDN
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
Usage
With unpkg
Here is a complete example with unpkg
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
With ESModule
To reduce bundle size, Rayna is built to be fully tree-shakable. The create Icons function will search for HTML Elements with the attribute data-Rayna and replace it with the svg from the given icon name.
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
Advanced Usage
Additional Options
In the createIcons function you can pass some extra parameters to adjust the nameAttr or add custom attributes like for example classes.
Here is a full example:
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
Treeshake the library, only use the icons you use
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
Custom Element Binding
<svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path
d="M12 19V6M5 12l7-7 7 7"/>
</svg>
.svg)
