Semantic-UI Icon is not displayed

Development Plone 6 UI (Volto)
1

Trying to use Icon in custom footer.jsx override but the icons are not displayed. Can someone guide me to include semantic UI icons in `theme/theme.config'


import { Icon } from 'semantic-ui-react';
.......

<summary><Icon circular name='legal'/>Disclaimer</summary>

image

2

@arky Can you try using one of the icons in Pastanaga Icons?

1 Like
3

That happens because Pastanaga (Volto's SemanticUI theme) doesn't include that font. If you compare the fonts here volto/theme/themes/pastanaga/assets/fonts at master · plone/volto · GitHub you'll see they were copied from the "basic" SemanticUI theme, not the "default" one. You'll find here more stuff: Semantic-UI-LESS/themes/default/assets/fonts at master · Semantic-Org/Semantic-UI-LESS · GitHub

It's possible that you also have to copy the icon.variables and icon.overrides from the default theme: Semantic-UI-LESS/icon.overrides at master · Semantic-Org/Semantic-UI-LESS · GitHub and Semantic-UI-LESS/icon.variables at master · Semantic-Org/Semantic-UI-LESS · GitHub

2 Likes
4

Thank you @nileshgulia1 and @tiberiuichim for clearing this up!

5

Now that I think about it, probably the best way to solve this problem is to set the @icon to default in theme.config. I don't actually know if/how the pastanaga icon css/font were tweaked.

6

Do you think I should file a bug report for this in volto bug tracker?

7

It's not really a bug, as the icons were trimmed down intentionally. But it is something that should be in an FAQ. I've started this The Big List of Small Volto Rules · Issue #2810 · plone/volto · GitHub

1 Like
8

Gotcha! Thanks @tiberiuichim

Let me know if you want to pitch in with anything. Just coming up to speed with volto.

9

@arky It would be awesome if you could write here or on the Volto ticket tracker anything that is confusing or a stumbling block, or just plain difficult. As with anything more complex, it's hard to have the mindset of someone newly exposed to a tech.

10

@tiberiuichim Here you go:

Problem Statement: A new developer working on Volto would incorrectly assume that all the Semantic UI font Icons would be available for use in Volto.

Use Case: The developer would like to use Semantic-UI 'legal' font icon as common disclaimer content icon.

Suggested Solution: Clearly state that Volto uses only a subset of Semantic UI icons in FAQs and also in Plone training docs.

Suggested Enhancement: Provide simple instructions to override and import additional Semantic UI icon fonts as needed using volto customization files (icon.overrides et al).

2 Likes