Tag icons component

I ended up getting something like this: image (The default tag icon is still here)

Does anyone see this kind of result?

Look for “tag style” in your site settings, and change it to simple, that will remove the grey bullets.

I see, thanks, but I will need the default grey bullets for all other tags. I achieved this by remove that bullets for specific tag:

a[data-tag-name="test1"]::before {
    display:none!important;
}

image

2 Likes

Looks like a fantastic tweak. Question for advice to the author: I am thinking of pimping my bland tags, some of which I use to tag posts by language (so I have tags “castellano”, “deutsch” etc.), with little country flags. Would uploading a custom .svg as described above be the way or are there preconfigured iconsets or maybe discourse-built-in emoji-sets that could be used?

An emoji would make sense for country flags, but this component does not use emojis, it uses icons from an icon set like Font Awesome.

You can try adding the emoji directly in the tag label. I tried this locally, and the tricky thing is that tags can’t have spaces. An example:

image

If you are ok with the dash, that’s the way to go.

Oh wow that is actually rather neat. Minus the dash :slight_smile: but I could probably live with it. Might even be worth trying a tag that is just a flag emoji…

Yes, just an emoji is cool… but you won’t be able to easily find that from a search in the tag dropdown (when posting).

Ok just one more semi-stupid question: how do I get the emoji to work as you did above with the francais? I tried creating a tag ":sweden:-svenska" but it doesn’t translate to the swedish flag

You need to use an emoji symbol (on mobile, for example, you would switch to the emoji keyboard).

1 Like

Ohhhh I thought the emojis in Discourse. Okay, need to switch to a mobile then. I thought I could somehow use these. It worked thanks!

1 Like

If I understood it right there isn’t an easy way of discovering the group a tag belongs to within the tag renderer?

This one would be great. I was using a custom CSS approach before and ditched it for this theme component with a fallback icon for all non-set tags (at least before the support for tag groups) and this is the one thing I miss.

Considering discourse-category-icons supports this, I’m guessing the renderer that replaceCategoryLinkRenderer replaces is used by the category dropdown while the renderer replaceTagRenderer replaces is NOT used by the tag dropdown, right? So maybe this would need a core change? The tag dropdown on the composer is using the replaced renderer, with icons.

2 Likes

Yes, that’s the issue with tag groups.

Yes, I just had a look and this seems like a fairly simple fix, core needs to use the tag renderer in the filter dropdown (it would match the tag picker in the composer). I will look into it shortly.

2 Likes

I just noticed that the category renderer is also replaced on the dropdown shown when #mentioning on the composer, showing the category icon from the theme component, but the tag renderer shows a renderer different from all other places, with a tag icon beside the tag name:
image

@pmusaraj do you think it’s possible to make this renderer use the one replaced by the theme component too?

Thanks.

1 Like

I think standardising this would make sense, yes. Are you interested in working on a PR for this @renato?

(FYI, a PR is up for the filter dropdown, will be merged probably sometime next week.)

3 Likes

I’ve begun using this component to visually alert users when applying a tag will trigger a chat integration.

Would it be possible to optionally color the tag text as well directly from this component? I see a manual option on the forum here. Thanks for the great component!

edit: It’d also be useful to add multiple icons to a tag. Thanks for considering!

1 Like

This can be done with SCSS in your theme, we don’t have plans to add this functionality to the component.

No plans to allow multiple icons per tag, either.

2 Likes

Hey @pmusaraj

Is there any workaround to set a fallback icon per tag-group yet?

Is it possible to change icons on all tags? Instead of bullets to smth else? This component is only for listed tags if I got it right.

Answer found:

.discourse-tags .bullet:before { 
    background: transparent;
    content: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 467 856.25" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd"><defs><style type="text/css">.fil0 {fill:black}</style></defs><g><path class="fil0" d="M234 0c129,0 233,105 233,234 0,64 -26,122 -68,165l-165 286 -166 -286c-42,-43 -68,-101 -68,-165 0,-129 105,-234 234,-234zm0 125c50,0 90,40 90,90 0,50 -40,91 -90,91 -50,0 -91,-41 -91,-91 0,-50 41,-90 91,-90z"/></g></svg>'); 
    vertical-align:baseline;
}

SVG icon images can be freely downloaded from sites such as https://thenounproject.com/

Bullet tags + tag-color

If you’re using bullet-style tags and

  • you want to have the same tag icon and tag text colors
  • you want to show the bullet only if there’s no tag icon set

here’s how i did it for the tags books and science-fiction:

End result:

  1. Setup of Tag icons component (this component)

  1. Setup of a secondary component that must be kept in sync with Tag Icons
    In this component we’re doing 2 things:
    1. Hide the bullet for specific tags
    2. Color the tag text with the same color as the icon

For this to work, we create a new theme component: Tag Icons extra.
In the Common/CSS section:

  1. Add the following mixin (needed only once):
@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}
  1. For every tag you want to edit, paste the following and replace REPLACEMETAG with the tag name and REPLACEMECOLOR with the same color as the icon:
[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}

4 Likes

Bug report: in the tag selector of a post, the icons are not colored:

Here, the icons should have the same color as the text (text is my own custom css):
image

My config:

2 Likes