Wiki source code of Icons
Version 2.4 by Lucas Charpentier (Sereza7) on 2024/02/12
Show last authors
| author | version | line-number | content |
|---|---|---|---|
| 1 | == Using icons in XWiki == | ||
| 2 | |||
| 3 | In order to add an icon in XWiki content, use the [[Icon Macro>>doc:extensions:Extension.Icon Macro.WebHome]] in your velocity template. This is the recommended way, by default it will fetch the icon from the current icon theme. | ||
| 4 | |||
| 5 | In order to add an icon in a Velocity script, you can use the [[icon manager script service>>https://www.xwiki.org/xwiki/bin/view/ScriptingDocumentation/?url=http:%2F%2Fnexus.xwiki.org%2Fnexus%2Fservice%2Flocal%2Frepositories%2Fpublic%2Farchive%2Forg%2Fxwiki%2Fplatform%2Fxwiki-platform-icon-script%2F14.10.18%2Fxwiki-platform-icon-script-14.10.18-javadoc.jar%2F!%2Forg%2Fxwiki%2Ficon%2FIconManagerScriptService.html]] with syntax such as {{code language="velocity"}}$services.icon.renderHTML('add'){{/code}}. | ||
| 6 | |||
| 7 | In the codebase, you might still find some other ways to use icons that are deprecated: | ||
| 8 | |||
| 9 | * Use the [[XWiki Syntax for icons>>doc:Documentation.UserGuide.Features.XWikiSyntax.WebHome||queryString="syntax=2.1§ion=Images"]] . As of now, these icons do not follow the current icon theme and are always rendered using Silk. See [[XWIKI-10758: Bind icons of the wiki syntax to the icon theme>>https://jira.xwiki.org/browse/XWIKI-10758]] . Moreover, using this syntax can pose a security threat. | ||
| 10 | * Use icon references as the image background of your HTML node. This method should be avoided to reduce technical debt. | ||
| 11 | |||
| 12 | == Icon themes == | ||
| 13 | |||
| 14 | XWiki supports multiple [[icon themes>>doc:extensions:Extension.Icon Theme Application]]. On a standard flavor of XWiki, [[Silk>>doc:extensions:Extension.Icon Theme Application||anchor="HSilkIconTheme"]] and [[Font Awesome>>doc:extensions:Extension.Font Awesome Icon Theme]] (FA) are available. As of now, the default on the standard flavor is Font Awesome 4. | ||
| 15 | |||
| 16 | |||
| 17 | |||
| 18 | [[List of available icon theme extensions>>doc:extensions:ExtensionCode.AllExtensions.WebHome||anchor="|t=extensions&p=1&l=15&s=doc.creationDate&d=desc&category=icontheme"]] | ||
| 19 | |||
| 20 | |||
| 21 | == XWiki icon set == | ||
| 22 | |||
| 23 | This is the set of icons that XWiki wants to support. **Naturally, they should be present in every Icon Theme!** | ||
| 24 | |||
| 25 | === Icon naming convention === | ||
| 26 | |||
| 27 | In order to keep long term consistency on the icon names, a set of rules have been discussed. Those must be followed when introducing a new icon to the XWiki Icon Set. | ||
| 28 | |||
| 29 | * Use kebab-case. | ||
| 30 | * For composite icon names, the main noun is the first in the name. | ||
| 31 | * Remove hyphens from compound nouns. | ||
| 32 | |||
| 33 | Examples: | ||
| 34 | |||
| 35 | * ‘file-add’ and not ‘add-file’ because the main noun is ‘file’ here ‘add’ is the action | ||
| 36 | * ‘pdf-export’ and not ‘export-pdf’ because the main noun is ‘pdf’ and ‘export’ is the action. | ||
| 37 | * ‘bullet-black’ and not ‘black-bullet’ because the main noun is ‘bullet’ and ‘black’ is an adjective | ||
| 38 | * ‘emoticon-smile’ and not ‘smile-emoticon’ because the main noun is ‘emoticon’ and ‘smile’ is a complementary noun. | ||
| 39 | * ‘fastforward’ is a compound noun from which we removed the hyphen. | ||
| 40 | * ‘file-pdf’ and not ‘pdf-file’ because in the meaning of this icon, the main meaning is ‘file’, while ‘pdf’ only helps to refine the meaning. On the contrary, ‘pdf-file’ would mean that we want a ‘file’ variation on the main concept of ‘pdf’. | ||
| 41 | |||
| 42 | === Mapping === | ||
| 43 | |||
| 44 | {{todo}} | ||
| 45 | Split this table in between multiple columns and move those to the appropriate piece of documentation. | ||
| 46 | {{/todo}} | ||
| 47 | |||
| 48 | The icons are sorted alphabetically. | ||
| 49 | |||
| 50 | {{velocity}} | ||
| 51 | ## Awesome Font | ||
| 52 | #set($discard = $xwiki.linkx.use('//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css', {'rel': 'stylesheet'})) | ||
| 53 | #set($discard = $xwiki.ssx.use('Proposal.IconSet')) | ||
| 54 | #set($icons = []) | ||
| 55 | #macro(icon $name $silk $fa $glyph $elusive) | ||
| 56 | #set($icon = {}) | ||
| 57 | #set($discard = $icon.put('name', $name)) | ||
| 58 | #set($discard = $icon.put('fa', $fa)) | ||
| 59 | #set($discard = $icon.put('silk', $silk)) | ||
| 60 | #set($discard = $icons.add($icon)) | ||
| 61 | |**$name**|#if(!$stringtool.isBlank($silk))image:icon:$silk $silk#end|#if(!$stringtool.isBlank($fa)){{html clean="false"}}<i class="fa fa-$fa"></i>{{/html}} fa-${fa}#end|#if(!$stringtool.isBlank($glyph)){{html clean="false"}}<span class="glyphicon glyphicon-$glyph"></span>{{/html}} glyphicon-$glyph#end|#if(!$stringtool.isBlank($elusive)){{html clean="false"}}<span class="glyphicon el-icon-$elusive"></span>{{/html}} el-icon-$elusive#end\\ | ||
| 62 | #end | ||
| 63 | |||
| 64 | |=Name|=Silk|=Font Awesome|=Glyphicon (Bootstrap)|=Elusive | ||
| 65 | #icon('add', 'add', 'plus', 'plus', 'plus') | ||
| 66 | #icon('align-center', 'text_align_center', 'align-center', 'align-center', 'align-center') | ||
| 67 | #icon('align-justify', 'text_align_justify', 'align-justify', 'align-justify', 'align-justify') | ||
| 68 | #icon('align-left', 'text_align_left', 'align-left', 'align-left', 'align-left') | ||
| 69 | #icon('align-right', 'text_align_right', 'align-right', 'align-right', 'align-right') | ||
| 70 | #icon('anchor', 'anchor', 'anchor', '', '') | ||
| 71 | #icon('arrow-in', 'arrow_in', 'window-minimize', '', '') | ||
| 72 | #icon('arrows', 'arrow_out', 'arrows-alt', 'fullscreen', '') | ||
| 73 | #icon('attach', 'attach', 'paperclip', 'paperclip', 'paper-clip') | ||
| 74 | #icon('backward', 'control_rewind', 'backward', 'backward', 'backward') | ||
| 75 | #icon('bell', 'bell', 'bell', 'bell', 'bell') | ||
| 76 | #icon('bold', 'text_bold', 'bold', 'bold', 'bold') | ||
| 77 | #icon('bomb', 'bomb', 'bomb', '', '') | ||
| 78 | #icon('book', 'book', 'book', 'book', 'book') | ||
| 79 | #icon('branch', 'arrow_branch', 'code-fork', '', '') | ||
| 80 | #icon('briefcase', 'briefcase', 'briefcase', 'briefcase', 'briefcase') | ||
| 81 | #icon('bug', 'bug', 'bug', '', '') | ||
| 82 | #icon('building', 'building', 'building', '', '') | ||
| 83 | #icon('bullet-black', 'bullet_black', 'circle', '', '') | ||
| 84 | #icon('calculator', 'calculator', 'calculator', '', '') | ||
| 85 | #icon('calendar', 'calendar', 'calendar', 'calendar', 'calendar') | ||
| 86 | #icon('camera', 'camera', 'camera', 'camera', 'camera') | ||
| 87 | #icon('car', 'car', 'car', 'bed', 'car') | ||
| 88 | #icon('caret-down', 'bullet_arrow_down', 'caret-down', 'triangle-bottom', 'caret-down') | ||
| 89 | #icon('caret-right', 'bullet_go', 'caret-right', 'triangle-right', 'caret-right') | ||
| 90 | #icon('caret-up', 'bullet_arrow_up', 'caret-up', 'triangle-top', 'caret-up') | ||
| 91 | #icon('certificate', 'rosette', 'certificate', 'certificate', 'certificate') | ||
| 92 | #icon('chart-bar', 'chart_bar', 'bar-chart-o', '', '') | ||
| 93 | #icon('chart-organisation', 'chart_organisation', 'sitemap', '', '') | ||
| 94 | #icon('check', 'accept', 'check', 'ok', 'ok') | ||
| 95 | #icon('clock', 'clock', 'clock-o', '', '') | ||
| 96 | #icon('cloud', 'weather_clouds', 'cloud', 'cloud', 'cloud') | ||
| 97 | #icon('coffee', 'cup', 'coffee', '', '') | ||
| 98 | #icon('cog', 'cog', 'cog', 'cog', 'cog') | ||
| 99 | #icon('columns', 'text_columns', 'columns', '', '') | ||
| 100 | #icon('comment', 'comment', 'comment', 'comment', 'comment') | ||
| 101 | #icon('comments', 'comments', 'comments', '', '') | ||
| 102 | #icon('contrast', 'contrast', 'adjust', '', '') | ||
| 103 | #icon('copy', 'page_copy', 'copy', 'edit', 'file-edit') | ||
| 104 | #icon('creditcard', 'creditcards', 'credit-card', 'credit-card', 'credit-card') | ||
| 105 | #icon('cross', 'cross', 'times', 'remove', 'remove') | ||
| 106 | #icon('cube', 'box', 'cube', '', '') | ||
| 107 | #icon('cubes', 'bricks', 'cubes', '', '') | ||
| 108 | #icon('cut', 'cut', 'cut', '', '') | ||
| 109 | #icon('database', 'database', 'database', '', '') | ||
| 110 | #icon('delete', 'delete', 'minus-circle', 'minus-sign', 'minus-sign') | ||
| 111 | #icon('desktop', 'computer', 'desktop', '', '') | ||
| 112 | #icon('dollar', 'money_dollar', 'dollar', '', '') | ||
| 113 | #icon('down', 'arrow_down', 'arrow-down', 'arrow-down', '') | ||
| 114 | #icon('download', 'application_put', 'download', 'download-alt', 'download-alt') | ||
| 115 | #icon('drive', 'drive', 'hdd-o', 'hdd', 'hdd') | ||
| 116 | #icon('edit', 'page_edit', 'edit', 'edit', 'edit') | ||
| 117 | #icon('eject', 'control_eject', 'eject', 'eject', 'eject') | ||
| 118 | #icon('emoticon-smile', 'emoticon_smile', 'smile-o', 'user', 'smiley') | ||
| 119 | #icon('envelope', 'email', 'envelope-o', 'envelope', 'envelope') | ||
| 120 | #icon('error', 'exclamation', 'exclamation-circle', 'exclamation-sign', 'exclamation-sign') | ||
| 121 | #icon('euro', 'money_euro', 'euro', 'euro', 'euro') | ||
| 122 | #icon('eye', 'eye', 'eye', 'eye-open', 'eye-open') | ||
| 123 | #icon('fastforward', 'control_fastforward', 'fast-forward', 'fast-forward', 'fast-forward') | ||
| 124 | #icon('fastbackward', 'control_rewind', 'fast-backward', '', '') | ||
| 125 | #icon('female', 'female', 'female', '', '') | ||
| 126 | #icon('file', 'page', 'file', 'file', 'file') | ||
| 127 | #icon('file-archive', 'page_white_compressed', 'file-archive-o', '', '') | ||
| 128 | #icon('file-code', 'page_white_code', 'file-code-o', '', '') | ||
| 129 | #icon('file-excel', 'page_white_excel', 'file-excel-o', '', '') | ||
| 130 | #icon('file-pdf', 'page_white_acrobat', 'file-pdf-o', '', '') | ||
| 131 | #icon('file-powerpoint', 'page_white_powerpoint', 'file-powerpoint-o', '', '') | ||
| 132 | #icon('file-text', 'page_white_text', 'file-text-o', '', '') | ||
| 133 | #icon('file-white', 'page_white', 'file-o', '', '') | ||
| 134 | #icon('file-word', 'page_white_word', 'file-word-o', '', '') | ||
| 135 | #icon('film', 'film', 'film', 'film', 'film') | ||
| 136 | #icon('filter', 'find', 'filter', '', '') | ||
| 137 | #icon('flag', 'flag_blue', 'flag', 'flag', 'flag') | ||
| 138 | #icon('floppydisk', 'disk', 'floppy-o', 'floppy-disk', 'floppy-disk') | ||
| 139 | #icon('folder', 'folder', 'folder', 'folder-open', 'folder-open') | ||
| 140 | #icon('font', 'font', 'font', 'font', 'font') | ||
| 141 | #icon('gamepad', 'controller', 'gamepad', '', '') | ||
| 142 | #icon('gbp', 'money_pound', 'gbp', 'gbp', 'gbp') | ||
| 143 | #icon('glass', 'drink', 'glass', 'glass', 'glass') | ||
| 144 | #icon('group', 'group', 'group', '', '') | ||
| 145 | #icon('heart', 'heart', 'heart', 'heart', 'heart') | ||
| 146 | #icon('heart-empty', 'heart', 'heart-o', 'heart-empty', 'heart-empty') | ||
| 147 | #icon('home', 'house', 'home', 'home', 'home') | ||
| 148 | #icon('image', 'image', 'image', 'picture', 'picture') | ||
| 149 | #icon('indent-left', 'text_indent', 'indent', 'indent-left', 'indent-left') | ||
| 150 | #icon('indent-right', 'text_indent_remove', 'outdent', 'indent-right', 'indent-right') | ||
| 151 | #icon('info', 'information', 'info-circle', 'info-sign', 'info-sign') | ||
| 152 | #icon('italic', 'text_italic', 'italic', 'italic', 'italic') | ||
| 153 | #icon('key', 'key', 'key', '', '') | ||
| 154 | #icon('keyboard', 'keyboard', 'keyboard-o', '', '') | ||
| 155 | #icon('left', 'arrow_left', 'arrow-left', 'arrow-left', '') | ||
| 156 | #icon('lightbulb', 'lightbulb', 'lightbulb-o', '', '') | ||
| 157 | #icon('link', 'link', 'link', 'link', 'link') | ||
| 158 | #icon('list', 'application_view_list', 'list-alt', 'list-alt', 'list-alt') | ||
| 159 | #icon('list-bullets', 'text_list_bullets', 'list-ul', 'list', 'list') | ||
| 160 | #icon('list-numbers', 'text_list_numbers', 'list-ol', '', '') | ||
| 161 | #icon('lock', 'lock', 'lock', 'lock', 'lock') | ||
| 162 | #icon('login', 'user_go', 'sign-in', 'log-in', 'circle-arrow-right') | ||
| 163 | #icon('logout', 'user_go', 'sign-out', 'log-out', 'circle-arrow-right') | ||
| 164 | #icon('male', 'male', 'male', '', '') | ||
| 165 | #icon('menu', 'bullet_arrow_down', 'bars', 'menu-hamburger', 'lines') | ||
| 166 | #icon('minus-square', 'bullet_toggle_minus', 'minus-square', 'minus-sign', 'minus-sign') | ||
| 167 | #icon('money', 'money', 'money', '', '') | ||
| 168 | #icon('more-vertical', 'bullet_arrow_down', 'ellipsis-v', 'option-vertical', 'chevron-down') | ||
| 169 | #icon('move', 'page_go', 'external-link', 'new-window', 'share') | ||
| 170 | #icon('music', 'music', 'music', 'music', 'music') | ||
| 171 | #icon('page', 'page_white_text', 'file-o', 'file', 'file') | ||
| 172 | #icon('paste', 'paste_plain', 'paste', '', '') | ||
| 173 | #icon('pause', 'control_pause', 'pause', 'pause', 'pause') | ||
| 174 | #icon('pencil', 'pencil', 'pencil', 'pencil', 'pencil') | ||
| 175 | #icon('phone', 'telephone', 'phone', '', '') | ||
| 176 | #icon('play', 'control_play', 'play', 'play', 'play') | ||
| 177 | #icon('plus-square', 'bullet_toggle_plus','plus-square', 'plus-sign', 'plus-sign') | ||
| 178 | #icon('print', 'printer', 'print', '', '') | ||
| 179 | #icon('question', 'help', 'question-circle', 'question-sign', 'question-sign') | ||
| 180 | #icon('random', 'arrow_switch', 'random', 'random', 'random') | ||
| 181 | #icon('refresh', 'arrow_refresh', 'refresh', 'refresh', '') | ||
| 182 | #icon('remove', 'cancel', 'times-circle', 'remove-sign', 'remove-sign') | ||
| 183 | #icon('repeat', 'arrow_redo', 'repeat', 'retweet', '') | ||
| 184 | #icon('right', 'arrow_right', 'arrow-right', 'arrow-right', '') | ||
| 185 | #icon('rotate-left', 'arrow_rotate_anticlockwise', 'rotate-left', '', '') | ||
| 186 | #icon('rotate-right', 'arrow_rotate_clockwise', 'rotate-right', 'repeat', '') | ||
| 187 | #icon('rss', 'feed', 'rss', '', '') | ||
| 188 | #icon('search', 'magnifier', 'search', 'search', 'search') | ||
| 189 | #icon('search-minus', 'zoom_out', 'search-minus', '', '') | ||
| 190 | #icon('search-plus', 'zoom_in', 'search-plus', '', '') | ||
| 191 | #icon('shield', 'shield', 'shield', '', '') | ||
| 192 | #icon('shoppingcart', 'cart', 'shopping-cart', 'shopping-cart', 'shopping-cart') | ||
| 193 | #icon('soccer', 'sport_soccer', 'futbol-o', '', '') | ||
| 194 | #icon('space', 'folder', 'folder-open', 'folder-open', 'folder-open') | ||
| 195 | #icon('star', 'star', 'star', '', '') | ||
| 196 | #icon('step-forward', 'control_end', 'step-forward', 'step-forward', 'step-forward') | ||
| 197 | #icon('step-backward', 'control_start', 'step-backward', 'step-backward', 'step-backward') | ||
| 198 | #icon('stop', 'control_stop', 'stop', 'stop', 'stop') | ||
| 199 | #icon('strikethrough', 'text_strikethrough', 'strikethrough', '', '') | ||
| 200 | #icon('subscript', 'text_subscript', 'subscript', '', '') | ||
| 201 | #icon('sun', 'weather_sun', 'sun-o', '', '') | ||
| 202 | #icon('superscript', 'text_superscript', 'superscript', '', '') | ||
| 203 | #icon('switch', 'arrow_switch', 'random', 'random', 'random') | ||
| 204 | #icon('table', 'table', 'table', '', '') | ||
| 205 | #icon('table-sort', 'table_sort', 'sort', '', '') | ||
| 206 | #icon('terminal', 'application_osx_terminal', 'terminal', 'console', '') | ||
| 207 | #icon('th', 'application_view_tile', 'th', 'th', 'th') | ||
| 208 | #icon('translate', 'page_white_world', 'language', 'globe', 'globe') | ||
| 209 | #icon('trash', 'bin', 'trash', 'trash', 'trash') | ||
| 210 | #icon('truck', 'lorry', 'truck', '', '') | ||
| 211 | #icon('underline', 'text_underline', 'underline', '', '') | ||
| 212 | #icon('undo', 'arrow_undo', 'undo', '', '') | ||
| 213 | #icon('unlink', 'link_break', 'unlink', '', '') | ||
| 214 | #icon('unlock', 'lock_open', 'unlock', '', '') | ||
| 215 | #icon('up', 'arrow_up', 'arrow-up', 'arrow-up', '') | ||
| 216 | #icon('user', 'user', 'user', '', '') | ||
| 217 | #icon('volume-up', 'sound', 'volume-up', '', '') | ||
| 218 | #icon('volume-down', 'sound_low', 'volume-down', '', '') | ||
| 219 | #icon('volume-off', 'sound_none', 'volume-off', '', '') | ||
| 220 | #icon('warning', 'error', 'exclamation-triangle', 'warning-sign', 'warning-sign') | ||
| 221 | #icon('wiki', 'world', 'globe', 'globe', 'globe') | ||
| 222 | #icon('world', 'world', 'globe', 'globe', 'globe') | ||
| 223 | #icon('wrench', 'wrench', 'wrench', 'wrench', 'wrench') | ||
| 224 | #icon('yen', 'money_yen', 'yen', '', '') | ||
| 225 | {{/velocity}} | ||
| 226 | |||
| 227 | == Icon strategy == | ||
| 228 | |||
| 229 | As of now, there's a consensus that the skeuomorph based Silk icons do look out of place in our modern UI. | ||
| 230 | One of the long term goals of the development team is to migrate the default to a more up to date icon theme. | ||
| 231 | However, integration of Silk icons in some UIs sometimes pre-dated the icon theme feature. This is why some elements of the XWiki interface use hard coded Silk icons. Replacing those icons with actual icontheme references is not always easy, because the concept they picture is not always mappable in other icon themes, and there's no easy conversion from Silk to the icon theme. This is especially apparent for technical icons: in Font Awesome, there's no icon for all kind of fields we could show in Silk, and there's no icon for the `composite` icons from Silk such as `addfile`, `editfile`, `addcomment`, `adduser`. Technically, most of those icons could be done with [[Font Awesome icon stacking>>https://jira.xwiki.org/browse/XWIKI-21580]], but those icons are difficult to find in any icon theme, so it might not make the most sense to add them to the icon set. | ||
| 232 | |||
| 233 | As of now, we can see that [[hard coded Silk references>>https://github.com/search?q=repo%3Axwiki%2Fxwiki-platform%20silk%2F&type=code]] are still present. |
