Answer a question

I want to change the default values for the regular icon sizes props. Props x-small, small, default, large, x-large, so I can just define my components like for example <v-icon x-large>mdi-close</v-icon> across the project and control all sizes at once at build time, without needing to use custom classes, inline styles or using the prop size="20" or anything similar, this will allow me to update all icons across the project in case design changes sizes for any reason by just changing the code in one place.

For example v-btn has a _variables.scss file with a map ($fab-icon-sizes) that you can overwrite in your project _variables.scss https://github.com/vuetifyjs/vuetify/blob/v2.2.23/packages/vuetify/src/components/VBtn/_variables.scss#L56-L65

But all I can find for v-icon is a (enum SIZE_MAP) in typescript file that can't easily change as far as I know. https://github.com/vuetifyjs/vuetify/blob/v2.2.23/packages/vuetify/src/components/VIcon/VIcon.ts#L17-L24

Looks to me like the v-btn behavior should be replicated in v-icon too.

Note: this is based on Vuetify v2.2.23.

Answers

As you've already figured out, the sizes of the icons are set in the code and can't easily be modified in the way you describe. If you want to do what you're suggesting, I think you have several okay options:

Option #1--Extend VIcon

You could create your own SFC to "subclass" VIcon:

<template>
  <v-icon
    :size="sizes[size]"
  >
    {{ icon }}
  </v-icon>
</template>

<script>
  export default {
    name: 'XIcon',
    props: {
      size: {
        type: String,
        default: 'medium',
      },
      // you'd need to re-implement any props
      // here that you want to pass through to
      // your component
    },
    data () {
      // Create your own array of set sizes here
      sizes: {
        'x-small': '8px',
        small: '10px',
        default: '12px',
        medium: '14px',
        large: '16px',
        'x-large': '18px',
      },
    },
  }
</script>

Then you could register it globally in your main.js file:

// ...other normal imports...
import XIcon from '@/components/XIcon'

Vue.component('x-icon', XIcon)

new Vue({
  //...
})

Then you could use <x-icon size="x-large">...</x-icon> and it would use your subclass. The downside is that you have to re-implement all of the VIcon props in your own component.

Option #2--"Global" Size Variables Imported Everywhere

You could set up an object to define your standard sizes in it's own file, e.g.:

// src/use/sizes.js
export const sizes = {
  'x-small': '10px',
  small: '12px',
  // ...
}

Then in your components:

<template>
  <div>
    <v-icon
      :size="sizes.small"
    >
      mdi-close
    </v-icon>
  </div>
</template>

<script>
  import { sizes } from '@/use/sizes'
  export default {
    name: 'SomeComponent'
    data: () => ({
      sizes,
    }),
  }
</script>

This doesn't have the same clean syntax of just saying <v-icon small>...</v-icon> but at least you only have to set the values once, and you can change them application-wide very easily. It also is compliant with how Vuetify is designed to be used, so other people collaborating on your code wouldn't have any trouble understanding it.

Option #3--Create your own VIcon package

I created and published my own custom npm package to implement Stripe Elements that conform to the Vuetify form field look and field. I wrote a series of blog posts to explain the process.

It might actually be rather simple to do this since you're only working with a single component (VIcon) and you're only changing a very small part of it. That said, it seems kind of overkill just so that you can accomplish the syntax that you want. Sounds like my kind of project. ;) At any rate, if you did it this way, you could just make sure that your VIcon was registered over the Vuetify one, and then you'd accomplish what you've described without seeming to have changed Vuetify at all.

Hope this helps!