Setting the icon properties for individual icons.

[Stephan Langeveld]

it is known that we can set the properties like this
<icon-account-box style="font-size: 2em; color: red"/>
or globally in the settings for all icons like this:

Icons({
  scale: 1.2, // Scale of icons against 1em
  defaultStyle: '', // Style apply to icons
  defaultClass: '', // Class names apply to icons
  compiler: null, // 'vue2', 'vue3', 'jsx'
  jsx: 'react' // 'react' or 'preact'
})

Sometimes when working with ui frameworks and custom components we would do the following:

import unlocked from '~icons/carbon/unlocked'
import locked from '~icons/carbon/locked'

<el-switch :active-icon="locked" :inactive-icon="unlocked"></el-switch>

the problem is that the icon is too small by default and i can't set the size here.

I was thinking of different ways to perhaps approach this problem.

1. Maybe an ability to alternatively set the attributes like this?

import unlocked from '~icons/carbon/unlocked?width=50;color=blue'

2. or perhaps a helper somehow

return {
unlocked: iconAttrs(unlocked, {width: 50, color: blue})
}

[Joaquín Sánchez]

@Fanna1119 @antfu I'll take a look via configuration, later via url params.

[Joaquín Sánchez]

First approach from configuration, testing also query params:

[Joaquín Sánchez]

with query params: