Class HyloIconBlueprint

An empty icon which can be used as blueprint for creating new ones.

  • when adding the SVG tree, make sure that all tags inside the SVG tree are not self closing but do have a closing tag
  • make sure to remove all unnecessary ids and that the remaining ids are unique
  • remove all data-name attributes
  • remove the width and height attributes from the svg tag and transfer the values to the corresponding hylo-icon attributes

If not needed, remove the properties "colorSecondary", ... , "stroke", "strokeSecondary" and the corresponding

Watch

functions and the function calls in componentDidLoad(). Have a look at the hylo-icon component to see informations about the function calls in componentDidLoad().

For color:
Sets the style "fill" to the given color. Classes which can be added to svg elements to set the fill color are:

  • hylo-icon-color
  • hylo-icon-color-secondary
  • hylo-icon-color-tertiary
  • hylo-icon-color-quaternary
  • hylo-icon-color-background

If no class selector is given, it looks for ".hylo-icon-color" and if it doesn't find any match, it grabs all "path" except the ones which have the classes "hylo-icon-color-[secondary || tertiary || quaternary || background]". If a selector is given, only these elements are set.

For stroke:
Sets the style "stroke" to the given color. Classes which can be added to svg elements to set the fill color are:

  • hylo-icon-stroke-color
  • hylo-icon-stroke-color-secondary

If no class selector is given, it looks for ".hylo-icon-stroke-color" and if it doesn't find any match, it grabs all "*[stroke]" except the ones with class "hylo-icon-stroke-color-secondary". If a selector is given, only these elements are set.

Properties

color colorBackground colorQuaternary colorSecondary colorTertiary height stroke strokeSecondary width

Properties

color

color: string

The main color of the icon.

colorBackground

colorBackground: string

The background color of the icon.

colorQuaternary

colorQuaternary: string

The quaternary color of the icon.

colorSecondary

colorSecondary: string

The secondary color of the icon.

colorTertiary

colorTertiary: string

The tertiary color of the icon.

height

height: string | number

The height of the icon. If only height is given, the width will be adjusted. If width and height is set to 0, width and height can be set through style sheet. If neither is given, default values will be set. In pixels.

Can be set as a number or an object in form of a JSON string. The object can contain the keys 'default', 'xl', 'lg', 'md', 'sm', 'xs'. A hylo-breakpoint-listener has to be present. e.g. {"default": 18.5, "xs": 13, "sm": 13}

stroke

stroke: string

The main stroke color of the icon.

strokeSecondary

strokeSecondary: string

The secondary stroke color of the icon.

width

width: string | number

The width of the icon. If only width is given, the height will be adjusted. If width and height is set to 0, width and height can be set through style sheet. If neither is given, default values will be set. In pixels.

Can be set as a number or an object in form of a JSON string. The object can contain the keys 'default', 'xl', 'lg', 'md', 'sm', 'xs'. A hylo-breakpoint-listener has to be present. e.g. {"default": 18.5, "xs": 13, "sm": 13}

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc