How to create a custom Icon-Component with different/dynamic props

[nadelblatt]

In Vuetify 2 you could define a Custom icon like this:

//file: vuetify.ts
export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg',
    values: {
      myCustomIcon: {
        component: MyCustomIconWithProps,
        props: {
          // is a real property of Component above!
          fillColor: 'blue',
        },
      },
    },
  },
});

So you can reuse the same icon with different colors without to recreate the whole component with different colors itself.

In Vuetify 3 I have no idea how to do the same.
One of my first tries looks like this:

import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases: {
      ...aliases,
      myCustomIcon: MyCustomIconWithProps, // HOW TO DO IT HERE?!
    },
    sets: {
      mdi,
    },
  },
})

Can someone help me with this?

[kingyue737]

import myicon from "./svg/myicon.vue";
import { createVuetify, type IconSet, type IconProps } from 'vuetify'

const customIcons = { myicon }

const custom: IconSet = {
  component: (props: IconProps) =>
    h(props.tag, [h(customIcons[props.icon as string], { class: 'v-icon__svg' })]),
}

const vuetify = createVuetify({
  icons: {
    defaultSet: "mdi",
    aliases: {
      ...aliases,
    },
    sets: {
      mdi,
      custom,
    },
  },
});

<!--page.vue-->
<template>
<v-icon icon="custom:myicon" color="blue">
</template>

[nadelblatt]

Thanky you for your answer, maybe you can help me out with another one.

How I have to declare the aliases?

const aliases: IconAliases = {
myfancyAlias: 'WhichString I Have to put in here?!'
}

Andy how i have to define the 'myicon.vue' file imported in you example?
Just paste in the svg tag?!

<template>
  <svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>upload</title>
    <g id="-----" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      <g id="Icon/96px_2px/Functional/Upload_Blue" transform="translate(-11.000000, -11.000000)" fill="#00008F" fill-rule="nonzero">
        <g id="upload" transform="translate(11.000000, 11.000000)">
          <path d="M37.8972973,26.0648649 C36.7312776,26.0737849 35.7915858,27.0231392 35.7945946,28.1891892 L35.7945946,35.7567568 L4.21081081,35.7567568 L4.21081081,28.1891892 C4.21081081,27.0264059 3.2681887,26.0837838 2.10540541,26.0837838 C0.942622108,26.0837838 -7.20500179e-06,27.0264059 -7.20500179e-06,28.1891892 L-7.20500179e-06,37.8756757 C-0.00300874541,39.0417256 0.936682994,39.99108 2.1027027,40 L37.8972973,40 C39.063317,39.99108 40.0030087,39.0417256 40.0000072,37.8756757 L40.0000072,28.1891892 C40.0030087,27.0231392 39.063317,26.0737849 37.8972973,26.0648649 Z M38.9189762,37.8756757 C38.9218012,38.1494982 38.815782,38.4132491 38.6241876,38.6088985 C38.4325932,38.8045478 38.1711202,38.9160667 37.8972973,38.9189189 L2.1027027,38.9189189 C1.82887984,38.9160667 1.56740683,38.8045478 1.37581239,38.6088985 C1.18421795,38.4132491 1.07819882,38.1494982 1.08102381,37.8756757 L1.08102381,28.1891892 C1.08102381,27.6234705 1.5396867,27.1648649 2.10540541,27.1648649 C2.67112411,27.1648649 3.12972973,27.6234705 3.12972973,28.1891892 L3.12972973,36.2972973 C3.12972973,36.5958296 3.37173797,36.8378378 3.67027027,36.8378378 L36.3297297,36.8378378 C36.628262,36.8378378 36.8702703,36.5958296 36.8702703,36.2972973 L36.8702703,28.1891892 C36.8702703,27.6234705 37.3288759,27.1648649 37.8945946,27.1648649 C38.4603133,27.1648649 38.9189762,27.6234705 38.9189762,28.1891892 L38.9189762,37.8756757 Z" id="Shape"></path>
          <path d="M9.36756757,16.3351351 C10.1018926,16.339457 10.8063639,16.0447889 11.3189189,15.5189189 L16.9567568,9.8 L16.9567568,28.2162162 C16.9567568,29.896953 18.3192632,31.2594595 20,31.2594595 C21.6807368,31.2594595 23.0432432,29.896953 23.0432432,28.2162162 L23.0432432,9.8 L28.6864865,15.5189189 C29.1998341,16.0422173 29.902082,16.3370543 30.6351351,16.3370543 C31.3681883,16.3370543 32.0704362,16.0422173 32.5837838,15.5189189 C33.6544577,14.4277917 33.6544577,12.6803164 32.5837838,11.5891892 L21.9459459,0.816216216 C21.4318672,0.294277985 20.729893,0.000386333398 19.9972973,0.000386333398 C19.2647016,0.000386333398 18.5627274,0.294277985 18.0486486,0.816216216 L7.41621622,11.5891892 C6.34554227,12.6803164 6.34554227,14.4277917 7.41621622,15.5189189 C7.92877122,16.0447889 8.63324258,16.339457 9.36756757,16.3351351 Z M8.18918919,12.3513514 L18.8216216,1.57837838 C19.4780292,0.941258694 20.5219708,0.941258694 21.1783784,1.57837838 L31.8162162,12.3513514 C32.4742007,13.0202668 32.4742007,14.0932467 31.8162162,14.7621622 C31.1598086,15.3992818 30.115867,15.3992818 29.4594595,14.7621622 L22.8864865,8.10810811 C22.7325356,7.95288574 22.5002422,7.90568092 22.2979176,7.98850383 C22.0955931,8.07132674 21.9630788,8.26786807 21.9621622,8.48648649 L21.9621622,28.2162162 C21.9621622,28.9172293 21.5881762,29.564992 20.9810811,29.9154986 C20.373986,30.2660051 19.626014,30.2660051 19.0189189,29.9154986 C18.4118238,29.564992 18.0378378,28.9172293 18.0378378,28.2162162 L18.0378378,8.48648649 C18.0369212,8.26786807 17.9044069,8.07132674 17.7020824,7.98850383 C17.4997578,7.90568092 17.2674644,7.95288574 17.1135135,8.10810811 L10.5459459,14.7567568 C9.88953836,15.3938764 8.84559678,15.3938764 8.18918919,14.7567568 C7.53474163,14.0884984 7.53474163,13.0196097 8.18918919,12.3513514 Z" id="Shape"></path>
        </g>
      </g>
    </g>
  </svg>
</template>