Class: SvgIcon

A lightweight SVG icon component that renders Material Design Icons or custom SVG paths. Automatically handles responsive sizing with special logic for iOS/Safari browsers.

Example

// Render with default size
<SvgIcon d={mdiClose} />

// Render with custom dimensions
<SvgIcon d={mdiClose} width={32} height={32} />

Remarks

• Uses currentColor for fill, allowing CSS color inheritance
• Automatically applies 100% width/height on iOS devices for better rendering
• Accepts both numeric and string values for width/height

Properties

Property	Modifier	Type	Description
$	public	ComponentInternalInstance	-
$attrs	public	Data	-
$data	public	{ }	-
$el	public	any	-
$emit	public	(event: string, ...args: any[]) => void	-
$forceUpdate	public	() => void	-
$host	public	Element | null	-
$nextTick	public	{ (): Promise<void>; <T, R> (this: T, fn: (this: T) => R | Promise<R>): Promise<R>; }	-
$options	public	ComponentOptionsBase<ToResolvedProps<ExtractPropTypes<{ d: { required: true; type: PropType<string>; }; height: { default: undefined; type: PropType<string | number | undefined>; }; width: { default: undefined; type: PropType<string | number | undefined>; }; }>, { }>, () => VNode<RendererNode, RendererElement, { [key: string]: any; }>, { }, { }, { }, ComponentOptionsMixin, ComponentOptionsMixin, { }, string, { height: string | number | undefined; width: string | number | undefined; }, { }, string, { }, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & MergedComponentOptionsOverride	-
$parent	public	| ComponentPublicInstance<{ }, { }, { }, { }, { }, { }, { }, { }, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, { }, { }, string, { }, { }, { }, string, ComponentProvideOptions>, { }, { }, "", { }, any> | null	-
$props	public	Partial<{ height: string | number | undefined; width: string | number | undefined; }> & Omit<{ d: string; height?: string | number; width?: string | number; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, DefaultKeys<{ d: { required: true; type: PropType<string>; }; height: { default: undefined; type: PropType<string | number | undefined>; }; width: { default: undefined; type: PropType<string | number | undefined>; }; }>>	-
$refs	public	Data	-
$root	public	| ComponentPublicInstance<{ }, { }, { }, { }, { }, { }, { }, { }, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, { }, { }, string, { }, { }, { }, string, ComponentProvideOptions>, { }, { }, "", { }, any> | null	-
$slots	public	UnwrapSlotsType<S>	-
$vuetify	public	Vuetify	-
d	readonly	string	-
height	readonly	string | number | undefined	-
width	readonly	string | number | undefined	-
__defaults?	static	{ height: string | number | undefined; width: string | number | undefined; }	-
__defaults.height	public	string | number | undefined	-
__defaults.width	public	string | number | undefined	-
__differentiator?	static	undefined	#3468 type-only, used to assist Mixin's type inference, TypeScript will try to simplify the inferred Mixin type, with the __differentiator, TypeScript won't be able to combine different mixins, because the __differentiator will be different
__file?	static	string	This one should be exposed so that devtools can make use of it
__isBuiltIn?	static	boolean	Compat build only, for bailing out of certain compatibility behavior
__isFragment?	static	undefined	-
__isSuspense?	static	undefined	-
__isTeleport?	static	undefined	-
__name?	static	string	name inferred from filename
call?	static	(this: unknown, ...args: unknown[]) => never	-
class?	static	unknown	-
compatConfig?	static	CompatConfig	-
compilerOptions?	static	RuntimeCompilerOptions	-
components?	static	GlobalComponents & Record<string, Component<any, any, any, ComputedOptions, MethodOptions, { }, any>>	-
computed?	static	{ }	-
data?	static	(this: CreateComponentPublicInstanceWithMixins<ToResolvedProps<ExtractPropTypes<{ d: { required: true; type: PropType<string>; }; height: { default: undefined; type: PropType<string | number | undefined>; }; width: { default: undefined; type: PropType<string | number | undefined>; }; }>, { }>, { }, { }, { }, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin>, vm: CreateComponentPublicInstanceWithMixins<ToResolvedProps<ExtractPropTypes<{ d: { required: true; type: PropType<string>; }; height: { default: undefined; type: PropType<string | number | undefined>; }; width: { default: undefined; type: PropType<string | number | undefined>; }; }>, { }>, { }, { }, { }, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin>) => { }	-
delimiters?	static	[string, string]	runtime compile only Deprecated use compilerOptions.delimiters instead.
directives?	static	GlobalDirectives & Record<string, Directive<any, any, string, any>>	-
emits?	static	(string[] | {}) & ThisType<void>	-
errorCaptured?	static	ErrorCapturedHook<unknown>	-
expose?	static	string[]	-
extends?	static	ComponentOptionsMixin	-
filters?	static	Record<string, Function>	-
inheritAttrs?	static	boolean	-
inject?	static	| { } | string[]	-
key?	static	PropertyKey	-
methods?	static	{ }	-
mixins?	static	ComponentOptionsMixin[]	-
name?	static	string	-
onVnodeBeforeMount?	static	VNodeMountHook | VNodeMountHook[]	-
onVnodeBeforeUnmount?	static	VNodeMountHook | VNodeMountHook[]	-
onVnodeBeforeUpdate?	static	VNodeUpdateHook | VNodeUpdateHook[]	-
onVnodeMounted?	static	VNodeMountHook | VNodeMountHook[]	-
onVnodeUnmounted?	static	VNodeMountHook | VNodeMountHook[]	-
onVnodeUpdated?	static	VNodeUpdateHook | VNodeUpdateHook[]	-
provide?	static	ComponentProvideOptions	-
ref?	static	VNodeRef	-
ref_for?	static	boolean	-
ref_key?	static	string	-
render?	static	Function	-
renderTracked?	static	DebuggerHook	-
renderTriggered?	static	DebuggerHook	-
setup?	static	(this: void, props: LooseRequired<Props & Prettify<UnwrapMixinsType<IntersectionMixin<Mixin> & IntersectionMixin<Extends>, "P">>>, ctx: { attrs: Data; emit: (event: string, ...args: any[]) => void; expose: <Exposed>(exposed?: Exposed) => void; slots: UnwrapSlotsType<S>; }) => | void | RenderFunction | () => VNode<RendererNode, RendererElement, { [key: string]: any; }> | Promise<() => VNode<RendererNode, RendererElement, { [key: string]: any; }>>	-
slots?	static	{ }	-
style?	static	unknown	-
template?	static	string | object	-
watch?	static	ComponentWatchOptions	-

Methods

$watch()

$watch<T>(
   source: T,
   cb: T extends (...args: any) => R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any,
   options?: WatchOptions<boolean>): WatchStopHandle;

Type Parameters

Type Parameter
T extends string | (...args: any) => any

Parameters

Parameter	Type
source	T
cb	T extends (...args: any) => R ? (...args: [R, R, OnCleanup]) => any : (...args: [any, any, OnCleanup]) => any
options?	WatchOptions<boolean>

Returns

WatchStopHandle

---

activated()?

static optional activated(): any;

Returns

any

---

beforeCreate()?

static optional beforeCreate(): any;

Returns

any

---

beforeDestroy()?

static optional beforeDestroy(): any;

Returns

any

Deprecated

use beforeUnmount instead

---

beforeMount()?

static optional beforeMount(): any;

Returns

any

---

beforeUnmount()?

static optional beforeUnmount(): any;

Returns

any

---

beforeUpdate()?

static optional beforeUpdate(): any;

Returns

any

---

created()?

static optional created(): any;

Returns

any

---

deactivated()?

static optional deactivated(): any;

Returns

any

---

destroyed()?

static optional destroyed(): any;

Returns

any

Deprecated

use unmounted instead

---

mounted()?

static optional mounted(): any;

Returns

any

---

serverPrefetch()?

static optional serverPrefetch(): void | Promise<any>;

Returns

void | Promise<any>

---

unmounted()?

static optional unmounted(): any;

Returns

any

---

updated()?

static optional updated(): any;

Returns

any