Fontawesome Icon renders more than once after Array sort and display with Svelte #each - font-awesome

Question

So I have a Sapper project where I use Fontawesome as front end Icon pack. I have an array displayed with svelte #each and in the html there is an icon and if I resort the array the position of the elements changes how it should be but now the Icons are rendered more than once next to each other. I think I know why it could be budged but I don't have a clue how to fix it. I think it's that the svelte renderer renders the component again and the fontawesome script just gets the info to render it again.
<script>
import { projectsFilter } from "#lib/store";
export let item;
let colapsed = true;
projectsFilter.subscribe(filter => {
colapsed = colapsed;
});
function changeState() {
colapsed = !colapsed;
}
</script>
<style type="text/scss">
</style>
<div class="card">
<div class="card-image">
<figure class="image is-16by9">
<img src={item.data.background} alt="placeholder" />
</figure>
</div>
<header class="card-header">
<p class="card-header-title">{item.data.name}</p>
<button class="card-header-icon" on:click={changeState}>
{#if !colapsed}
<span class="icon">
<i class="fas fa-angle-down" aria-hidden="true" />
</span>
{:else}
<span class="icon">
<i class="fas fa-angle-up" aria-hidden="true" />
</span>
{/if}
</button>
</header>
{#if !colapsed}
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
iaculis mauris.
</div>
</div>
{/if}
<footer class="card-footer">
Save
Edit
Delete
</footer>
</div>
This is the component that's been rendered. Within the #each loop.
The Arrows/angles are the problem
Thanks for the help in advance

Answer 1

You can use the following code and check
<i class={!colapsed ? 'fas fa-angle-down' : 'fas fa-angle-up'}
aria-hidden="true" />
and the whole code below
<script>
import { projectsFilter } from "#lib/store";
export let item;
let colapsed = true;
projectsFilter.subscribe(filter => {
colapsed = colapsed;
});
function changeState() {
colapsed = !colapsed;
}
</script>
<style type="text/scss">
</style>
<div class="card">
<div class="card-image" />
<header class="card-header">
<p class="card-header-title">asdads</p>
<button class="card-header-icon" on:click={changeState}>
<span class="icon">
<i
class={!colapsed ? 'fas fa-angle-down' : 'fas fa-angle-up'}
aria-hidden="true" />
</span>
</button>
</header>
{#if !colapsed}
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
iaculis mauris.
</div>
</div>
{/if}
<footer class="card-footer">
Save
Edit
Delete
</footer>
</div>

Answer 2

You have to preload both icons and switch the visibility with aria-hidden=true and aria-hidden=false.
I usually create my own css-classes and add and remove them in a toggle function:
.hidden {
display = none;
}
.shown {
display = block;
}
You can e.g. toggle with two functions like this:
function toggleCollapsed(event) { // event.target might be a better way to catch the element...
document.getElementById('ELEMENT1_ID').classList.remove('hidden');
document.getElementById('ELEMENT1_ID').classList.add('shown');
document.getElementById('ELEMENT2_ID').classList.remove('shown');
document.getElementById('ELEMENT2_ID').classList.add('hidden');
}
function toggleFolded(event) {
document.getElementById('ELEMENT1_ID').classList.remove('shown');
document.getElementById('ELEMENT1_ID').classList.add('hidden');
document.getElementById('ELEMENT2_ID').classList.remove('hidden');
document.getElementById('ELEMENT2_ID').classList.add('shown');
}
Than you can e.g.:
<button class="card-header-icon" on:click={changeState === true ? toggleFolded : toggleCollapsed}>