Setting Global Icon - Svelte Remix
You can create global icon preferences in your Svelte application using setContext
.
This allows you to configure icon-related properties once and share them across multiple
components.
Setting preferences #
In your +layout.svelte
or +page.svelte
, you can define and set global
icon preferences as follows:
<script>
import { setContext } from 'svelte';
// Define your global icon settings
const iconCtx = {
size: '30',
};
setContext('iconCtx', iconCtx);
</script>
All properties are optional, allowing you to fine-tune the appearance and accessibility of your icons as needed.
Prop size #
If you set size
, icons can be customized with different color. For example:
<script>
import { setContext } from 'svelte';
import { AttachmentLineBusiness } from 'svelte-remix';
const iconCtx = {
size: '30'
};
setContext('iconCtx', iconCtx);
</script>
<AttachmentLineBusiness color="#ff4488" />
Setting more than one props #
Remember that you can set one or more properties, allowing you to tailor icon settings to your specific design and accessibility requirements.