ComboStrap UI - Icon Component

1 - About

The icon component permits your to create an icon :

3 - Icon Type

3.1 - Material Design Icon

The icon component supports all material design icon.

To show a material design icon:

Example with the arrow-down-circle

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

3.2 - SVG Media File

The icon component supports the rendering of SVG file located in the media library

By default, svg files can't be uploaded because they can embedded script and makes it more difficult.

To upload SVG files, you may:

  • transfer the files directly on your server in a location under the media directory (ie DOKUWIKI_HOME/data/media)
  • or allows the upload of SVG file by adding the SVG extension into the mime.local.conf file
mime.local.conf
svg image/svg+xml

Then, you can render it by giving the media id into the name attributes:

<icon name="logo.svg" color="orange"/>

  • Output:

3.2.1 - Inline SVG

This component does not support inline SVG because it's a property of HTML.

If you authorize the direct use of HTML, you can also show inline SVG. See ComboStrap UI - Native HTML Inline Icon

4 - Properties

4.1 - Color

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

<icon name="logo.svg" color="pink" />

4.2 - Sizing: Width and Height

The width and height attributes take the default value of 24px but you can overwrite them.

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

4.3 - Native Attribute

As all ComboStrap UI components do, the icon component supports also all attributes of its underlying svg HTML element. See svg attributes

5 - Configuration

5.1 - Icons namespace

When the icon component uses a icon of materialdesignicons.com, the icon is downloaded 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/

6 - Support

6.1 - Prerequisite

This component uses the simplexml module that is enabled by default. It should be then no problem for most of the platform.