Use standard share icon for share post (instead of link icon)

In recent times share icon has become more or less standardized as

or

share

I think the former is the most standard.

On Discourse the share post icon is a link (as in links-in-a-chain) icon. This also works well, but I think nowadays the nodes icon at the top here is most recognized.

Is there a recommended way to change this?

1 Like

The default code would be:

<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('link', 'share-alt');
</script>

Strangely this doesn’t work. It does work with other icons used just next to it, like bookmark or flag. link should be the icon’s name though…

@darkpixlz you recently posted about replacing the link icon with a cake in the sidebar… did you use a different icon name here?

2 Likes

Thanks, I tried this as well (in header) it indeed did not work.

Your code is to edit this element correct?

<svg class="fa d-icon d-icon-d-post-share svg-icon svg-node" aria-hidden="true">
  <use xlink:href="#link">
  </use>
</svg>

So d-icon-d-post-share?

Sorry I’m quite new to (modern) javascript / CSS

1 Like

I made a feature request to do it, but I wasn’t ever able to get it manually.

Update: I see what you mean, it was basic inspect element, not an actual plugin

2 Likes

It used to be the link icon, but that replaced the link icon where the share icon wouldn’t make sense (like on the formatting bar button for adding a link).

I just tested the below and it seems to work as intended:

api.replaceIcon('d-post-share', 'share-alt');
api.replaceIcon('d-topic-share', 'share-alt');

The first replaces the icon within posts, the second replaces the icon for the Share button at the bottom of a topic.

5 Likes

ah cool @renato! works like a charm :tada:

Actually external-link-alt can look good as well…

image

3 Likes

Except external link is not same as sharing… no matter how good is looking :wink:

5 Likes

hmm… I guess I wouldn’t worry that much about an icons “etymology” :nerd_face: but rather if it’s commonly used in that context. And this seems pretty much the case here, e.g. here’s a view from twitter:

image

Thanks Renato. For me the icon disappears.

<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('d-post-share', 'share-alt');
  api.replaceIcon('d-topic-share', 'share-alt');
</script>

To the header using a theme component (using the default theme). I get:

Screenshot from 2023-02-27 21-22-47

Do I need to do something else, maybe the icons need to be added?

Well, it woud be nice if users understand the function too :wink:

Go to settings and search svg icon subset. Add share-alt and you are good to go.

4 Likes

Awesome thanks @Jagster

2 Likes

Well, agree to disagree, I find the share icon a better representation of the action than a link icon, but that’s just me. Also, if you’re on mobile, this action will actually open the OS share UI, and I’m pretty sure that the link approach is only used because we don’t have a good support for the Web Share API on desktop just yet.

If I understand the comment by @Jagster correctly, he is not arguing against the use of share-alt for the external-link-plus-SM-share popup on desktop / OS share UI on mobile, but rather he saying that since it is a share functionality, using the external link icon wouldn’t cover the functionality entirely.

That’s my interpretation, I could be wrong

1 Like

Oh, I think you’re right and I totally missed the context…

I’m sorry @Jagster!

2 Likes