-
|
Currently I have it set up as follows: A <script src="https://unpkg.com/feather-icons" />
<script defer>
feather.replace();
</script>And #[component]
pub fn Icon(cx: Scope, #[prop(into)] name: String) -> impl IntoView {
view! {
cx,
<i data-feather=name></i>
}
}After the And the Icon component, while it does render, spews out errors into the console. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
(I often link to GitHub discussions when other people need help, so I've written kind of a long answer here. Feel free to skip to the end but I think reading the first will help you when you're thinking about how thi framework, or honestly most similar JS or WASM frameworks, works overall.) The ProblemSo let's think through the way your application runs:
If the WASM loads before the Feather JS, it's fine (for now). It says, "Okay, there's an If the Feather JS loads before the WASM, it swaps out all the Now, you could say — Well, why don't we just ignore any mismatches like this? And there are cases in which you'd be right. However, on the first client-side navigation to another route with an icon, or the first time you try to create the Icon element on the client side, you'd come back and report that the icons don't load. Which makes sense, because the Feather JS loads once on page load and calls the In my experience, these "just load some JS from a CDN and run it" approaches really only work with static HTML sites/multi-page apps that are just loading HTML from the server on every navigation. Two Solutions
Option 2 is the clear winner from my perspective. It looks something like this
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I went with option 3, which is switching to Google's Material Icons instead. But... both of these would've been solutions as well, yes. Truthfully, I haven't worked with frameworks like this before, as my past experiences are very static in comparison. So it's good to expand my knowledge as well. |
Beta Was this translation helpful? Give feedback.
(I often link to GitHub discussions when other people need help, so I've written kind of a long answer here. Feel free to skip to the end but I think reading the first will help you when you're thinking about how thi framework, or honestly most similar JS or WASM frameworks, works overall.)
The Problem
So let's think through the way your application runs:
<head>that tells the browser to start loading the WASM version of your app<body>that includes your app, rendered to HTML, includingi. the
<script>tags from the Feather componentii. the
<i>tag from the Icon component