|
3 | 3 | - Bootstrap Icons |
4 | 4 | - SVG Inline Icons |
5 | 5 | - Iconresolver |
6 | | - |
7 | 6 |
|
8 | | -# Bootstrap Icons |
| 7 | +## Bootstrap Icons |
9 | 8 |
|
10 | 9 | Bootstrap is the default CSS Framework in Plone 6. We decided to use it's icons as well. Check out all available Icons: |
11 | 10 |
|
12 | 11 | https://icons.getbootstrap.com/ |
13 | 12 |
|
14 | 13 | Icons are shipped via plone.staticresources. Check out the [package.json](https://github.com/plone/plone.staticresources/blob/master/package.json) of the package to get the actual version of the icons in Plone. |
15 | 14 |
|
| 15 | +## Registration |
16 | 16 |
|
17 | | -# Registration |
| 17 | +- Icons are registered in Plone's registry |
| 18 | +- Registrered to override of icons via xml |
| 19 | +- Option to customize UI and contenttype icons |
| 20 | +- [Bootstrap Icons](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_bootstrap.xml) |
| 21 | +- [Contenttypes](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_contenttype.xml) |
| 22 | +- [Plone UI](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_plone.xml) |
18 | 23 |
|
19 | | -* Icons are registered in Plone's registry |
20 | | -* Registrered to override of icons via xml |
21 | | -* Option to customize UI and contenttype icons |
22 | | -* [Bootstrap Icons](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_bootstrap.xml) |
23 | | -* [Contenttypes](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_contenttype.xml) |
24 | | -* [Plone UI](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_plone.xml) |
25 | | - |
26 | | - |
27 | | -# Contextual Icons |
| 24 | +## Contextual Icons |
28 | 25 |
|
29 | 26 | We definde contextual icons. If you don't like e.g. the share icon - override it without touching the share icon used by the system. |
30 | 27 |
|
31 | | -* Icons like copy, cut, paste |
32 | | -* Identical function all over the site |
33 | | -* That's why we reuse those icons |
34 | | -* Specific icon name is based on the usage in the system |
| 28 | +- Icons like copy, cut, paste |
| 29 | +- Identical function all over the site |
| 30 | +- That's why we reuse those icons |
| 31 | +- Specific icon name is based on the usage in the system |
35 | 32 |
|
36 | 33 | ## Icon expression |
37 | 34 |
|
38 | | -* icon_expression field is used again to define icons (e.g. for actions, contenttypes) |
39 | | -* Use icon name for icon expressions |
40 | | - |
41 | | - |
42 | | -# Customization |
43 | | - |
44 | | -* Add custom icons |
45 | | -* Override some of the icons |
46 | | -* TODO |
| 35 | +- icon_expression field is used again to define icons (e.g. for actions, contenttypes) |
| 36 | +- Use icon name for icon expressions |
47 | 37 |
|
| 38 | +## Customization |
48 | 39 |
|
49 | | -# Icon Font |
| 40 | +- Add custom icons |
| 41 | +- Override some of the icons |
| 42 | +- TODO |
50 | 43 |
|
51 | | -* Setup profile to install icon font |
52 | | -* Usage as known from e.g. Font Awesome |
53 | | -* TODO |
| 44 | +## Icon Font |
54 | 45 |
|
| 46 | +- Setup profile to install icon font |
| 47 | +- Usage as known from e.g. Font Awesome |
| 48 | +- TODO |
55 | 49 |
|
56 | | -# Iconresolver |
| 50 | +## Iconresolver |
57 | 51 |
|
58 | | -## Get Icon URL |
| 52 | +### Get Icon URL |
59 | 53 |
|
60 | 54 | URL method of @@icons view returns the actual URL to the SVG icon. This can be used e.g. in an img tag. |
61 | 55 |
|
62 | 56 | ``` |
63 | 57 | <img src="" tal:attributes="src python:icons.url('alarm')" class="custom-class" alt="foo" /> |
64 | 58 | ``` |
65 | 59 |
|
66 | | -## Get Icon Tag |
| 60 | +### Get Icon Tag |
67 | 61 |
|
68 | 62 | Tag method is used with tal:replace and returns an entire inline SVG image. Inline icons can be styled via CSS. tag_class and tag_alt is used to pass in custom classes and an alt text. |
69 | 63 |
|
70 | 64 | ``` |
71 | 65 | <tal:icon tal:replace="structure python:icons.tag('archive', tag_class='custom-class', tag_alt='foobar')" /> |
72 | 66 | ``` |
73 | 67 |
|
74 | | -## Resource Path |
| 68 | +### Resource Path |
75 | 69 |
|
76 | 70 | SVG Files are avaiblae as resource. |
77 | 71 |
|
78 | 72 | ``` |
79 | 73 | ++plone++bootstrap-icons/lightning.svg |
80 | 74 | ``` |
81 | 75 |
|
82 | | -## Fallback |
| 76 | +### Fallback |
83 | 77 |
|
84 | | -* There is a Plone icon defined as fallback if icon name is not found |
85 | | -* There are fallback groups e.g. for [mimetype icons](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_mimetype.xml) |
86 | | -* JPEG icon is e.g. mimetype-image/jpeg |
87 | | -* You can register specific icons |
88 | | -* If there is no specific icon mmimetype-image is used as fallback |
| 78 | +- There is a Plone icon defined as fallback if icon name is not found |
| 79 | +- There are fallback groups e.g. for [mimetype icons](https://github.com/plone/plone.staticresources/blob/master/src/plone/staticresources/profiles/default/registry/icons_mimetype.xml) |
| 80 | +- JPEG icon is e.g. mimetype-image/jpeg |
| 81 | +- You can register specific icons |
| 82 | +- If there is no specific icon mmimetype-image is used as fallback |
0 commit comments