ComboStrap UI - Icon Component
Table of Contents
1 - About
The icon component permits your to create an icon :
- from the material design icons library
- from a SVG media file located in your media library
2 - Articles Related
3 - Icon Type
3.1 - Material Design Icon
The icon component supports all material design icon.
To show a material design icon:
- Select your icon
- Save its name
- And use it in the name attribute of the icon component
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
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
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
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.