Emoji mention theme component

Customization Theme component
7

I wanted the ability to also use custom SVGs as the icon next to a mention, something that I’ve seen on Guilded for the staff and something I wanted to have there but couldn’t have—yet another reason why I’m liking Discourse so much is that I can actually hack together something that may work instead of hoping and waiting the devs will add it.

So I hacked together the following solution. It’s not foolproof by any means, probably requires the SVG you upload to have a SCSS variable that starts with svg and yet it seems to work enough for me now :slight_smile:

If someone wants to take this code and run with it, incorporate it to make it fancier, I’d be grateful!

Possible things to improve

  1. Make it work for all SVG icons, meaning all the Discourse ones and all that are uploaded by don’t start with svg.
  2. Clean up the code.
  3. Improve the styling, as I’ve kinda hacked together the CSS to work and may not work in all situations.

Regardless, here’s an example of a mention with me using the custom icon I have for Emotional Self-Defense as the staff mention icon:

image

Here’s the code I added:

header.html

  // Add SVG icons as an option, as long as they're included in assets and uploaded
  // Creates an object of all the assets and iterates to find which links have the data-emoji
  // attribute equaling the asset variable name then adds the URL for it

  // convert object to key's array
  const keys = Object.keys(settings.theme_uploads);

  // print all keys
  console.log(keys);

  // iterate over object
  keys.forEach((key, index) => {
      console.log(`${key}: ${settings.theme_uploads[key]}`);
      api.decorateCooked($elem => {
        var url = settings.theme_uploads[key];
        console.log("key: " + key);
        console.log("index: " + index);
        console.log("url: " + url);
        console.log(JSON.stringify(settings.theme_uploads));
        $elem
          .find("a[data-emoji^='" + key + "']")
          .css("--svg-icon", "url('" + url + "')");
        }
      );    
  });

common.scss

@if $show-after-mention == "true" {
  [data-emoji^="svg"]:after {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
} @else {
  [data-emoji^="svg"]:before {
    content: 'hey ';
    color: transparent;
    height:5px;
    width:15px;
    background: var(--svg-icon) no-repeat center;
    background-size: contain;
    display: inline;
  }
}

This also requires you to:

  1. Create an /assets folder
  2. Add svg files in the /assets folder, like /assets/esd-heart.svg
  3. Update the about.json file to link to those assets with something like:
"assets": {
  	"svg_esd_heart": "assets/esd-heart.svg"
}
1 Like