ComboStrap UI - Icon Component

About

icon is a component that permits to add easily an svg icon such as this one: :

Syntax

An icon can be seen as a character and is therefore a component that can be used in a line.

The syntax is:

<icon name="[library:]name" />

where:

  • name is the name of the icon
  • library is the optional name of the icon library (if not set, the default is used)

To show a icon:

  • Go to a library
  • Select your icon and remember its name
  • If you are not using the default library, add the library name as prefix

Library

We supports the below libraries.

The name or acronym can be used as library name.

Name Acronym Location
bootstrap bs Bootstrap icon
material-design md Material design icon
feather fe Feather

The default library is material-design but you can change this configuration.

Other library

You can also download an icon from your preferred icon library and use it directly.

How to use an other icon library such as Google Icon.

Icon Vs Svg

An icon is just a svg that is seen as a character.

ComboStrap sets the following properties on a icon by default:

  • width and height have the same value (default to 24px)
  • color: currentColor by default
  • not responsive (no preserveAspectRatio and no max length CSS properties)
  • no alignment (ie no left, center or right)

As an icon is just a svg, you can also use the svg syntax directly against a custom svg to embed it as an icon.

Example:

{{:custom-icon.svg?16&type=icon|}}

Example

Material Design Icon

Example with the arrow-down-circle

<icon name="arrow-down-circle" color="danger" width="96px" height="96px" />

Bootstrap

Example with the arrow-down-circle-fill

<icon name="bootstrap:arrow-down-circle-fill" color="blue" width="48px" height="48px" />

Feather

Example with a box icon

<icon name="fe:box" color="blue" width="48px" height="48px" />

Other library such as google icon

You can also easily embedded icons from other icon banks.

You just need to follow this steps:

  • go to your icon repository
  • download your icon
  • upload it to your media library (preferably under the directory combostrap:icons)
  • use it:
    • with the svg syntax with a value of icon for the type attribute
    • or with the icon syntax (if saved under the directory combostrap:icons)

Example with Google icon and the favorite icon saved in the media library in the namespace combostrap:icons:google

{{:combostrap:icons:google:favorite_black_24dp.svg?36&type=icon&color=steelblue|}}

  • with the icon syntax (if you saved it under the directory combostrap:icons)
<icon name="google:favorite_black_24dp" width="36" color="purple"/>

Properties

Color

In the color attribute, you can set a color value.

ComboStrap detects automatically if the icon is a solid or outline one and sets the color accordingly.

Example with the bootstrap alarm clock

The outline icon

<icon name="bs:alarm" color="pink" />

Versus the solid (iefill) icon

<icon name="bs:alarm-fill" color="pink" />

Sizing: Width and Height

The width and height attributes have the same value and takes the default value of 24px but you can overwrite it.

<icon name="logo.svg" width="96px" />

Styling and Native Attribute

The icon component supports also :

Example:

<icon name="bs:alarm-fill" color="pink" onHover="grow" width="36"/>

Configuration

Icons namespace

When the icon does not exist, the component downloads the icons in the namespace set in the icons_namespace configuration.

The default value is :combostrap:icons

On the server, the namespace is a location from the media directory: DOKUWIKI_HOME/data/media/

Default Library

You can change the default library with the defaultIconLibrary configuration.

At installation time, the default library is material design.

Support

Prerequisite

This component uses the DOM module. This module is enabled by default on all hosting platform. It should be then no problem for most of your installation.

Powered by ComboStrap