SvgIconProps
Represents the props of the KendoVue SvgIcon component.
Definition
Package:@progress/kendo-vue-common
Properties
ariaLabel?
string
Sets the aria-label of the icon element.
class?
string
Sets a list of CSS classes on the root DOM element.
Sets the fill mode of the icon.
The possible values are:
solid—Renders the default fill mode of the icon.outline—Renders an outlined version of the icon.duotone—Renders a two-tone version of the icon.
flip?
string
Sets the flip direction of the icon.
The possible values are:
default(Default)—Does not flip the icon.horizontal—Flips the icon horizontally.vertical—Flips the icon vertically.both—Flips the icon both horizontally and vertically.
Sets the SVG icon to render.
- The possible keys are:
name—The unique name of the icon.content—The full SVG content of the icon.viewBox—The viewBox of the icon.variants—A map of variant names to their SVG content strings.
id?
string
Sets the id of the icon element.
name?
string
Sets the name of the icon.
Sets the size of the icon.
The possible values are:
default (Default)—Font-size: 16px; Width: 16px; Height: 16px.
xsmall—Font-size: 12px; Width: 12px; Height: 12px.
small—Font-size: 14px; Width: 14px; Height: 14px.
medium—Font-size: 16px; Width: 16px; Height: 16px.
large—Font-size: 20px; Width: 20px; Height: 20px.
xlarge—Font-size: 24px; Width: 24px; Height: 24px.
xxlarge—Font-size: 32px; Width: 32px; Height: 32px.
xxxlarge—Font-size: 48px; Width: 48px; Height: 48px.
You can use the style prop to apply a custom font size to the icon.
svgClassName?
string
Sets a list of CSS classes on the svg element.
svgStyle?
object
Sets additional CSS styles on the svg element.
tabIndex?
number
Sets the tabIndex of the icon element.
Sets the theme color of the icon.
The possible values are:
inherit(Default)—Applies the current color.primary—Applies the primary theme color.secondary—Applies the secondary theme color.tertiary— Applies the tertiary theme color.info—Applies the info theme color.success— Applies the success theme color.warning— Applies the warning theme color.error— Applies the error theme color.inverse— Applies the inverse theme color.
If you do not set this property, the icon takes the color of its parent.
You can use the style prop to apply custom color styles to the icon.
title?
string
Sets the title of the icon element.
Sets the variant of the SVG icon to render.
When you set it, the SvgIcon renders the SVG content of that variant
from the variants map of the icon. If the variant does not exist,
the SvgIcon renders the default content instead.
The possible values are:
solid—Renders a filled (solid) version of the icon.outline—Renders an outlined version of the icon.duotone—Renders a two-tone version of the icon.
viewBox?
string
Sets the viewBox of a custom SVG icon.
'0 0 24 24'