#icons #leptos #remix #applications #cdn #integrate #component

leptos-remix-icon

Easily integrate Remix icons in Leptos applications

4 stable releases

1.0.3 May 26, 2024
1.0.2 May 24, 2024
1.0.1 May 16, 2024

#1649 in Web programming

MIT license

7KB
78 lines

Leptos Remix Icon

Integrate Open Source Remix Icon into Leptos Application

Getting Started

Include Remix CDN in your application's index.html

<!--index.html-->
<head>
  ...
<link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css"
    rel="stylesheet"
/>

</head>

Then in your Leptos Components

use leptos_remix_icon::Icon;
use leptos::{view, IntoView, component};

#[component]
pub fb Button(){

  view!{
<button> Star on Github 
  <Icon icon="github-fill" class="text-gray-500"/> 

  // with size 
    <Icon icon="github-fill" size="xxs" /> 
</button>
  }
}

Development

To use Remix Icon locally

  1. Download the CSS file from https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css

  2. Add the downloaded file remix.css to public folder

  3. Add the following line to your index.html

<!--index.html-->
<head>
  ...
<link data-trunk rel="copy-dir" href="./public/" />

<head/>

see the CDN and local assets examples

License

This project is licensed under the MIT License - see the LICENSE file for details

Acknowledgments

Remix Icon Team

Dependencies

~24–35MB
~553K SLoC