Dynamically displaying icons based on text

Need help
1

You can use [fa]icon name[/fa] inside of text to display FontAwesome icons with BBCode. Anyone know how to do the same with Phosphor?

2
  1. follow the vanilla css instructions and add the link tags to the page
  2. [fa]nqu ph ph-smiley[/fa]
    [fa]nqu ph-fill ph-heart[/fa]
    [fa]nqu ph ph-cube[/fa]

of course

  1. this is a hack that uses bubble internal bbcode handling, it can break at any time if they change it
  2. you still have the fa class applied to the element and can have conflicting styles
  3. you load all icons
  4. you make sure there isn’t any fa-nqu class defined in the page :joy:
2 Likes
3

Adding this script from GitHub - phosphor-icons/homepage: The homepage of Phosphor Icons, a flexible icon family for everyone for any passerbys:

<!doctype html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css"
    />
  </head>
  <body>
    <i class="ph ph-smiley"></i>
    <i class="ph-fill ph-heart" style="color: hotpink"></i>
    <i class="ph ph-cube"></i>
  </body>
</html>
2 Likes
4

I have developed a plugin specifically for these needs - free of charge:
Dynamic Icons Renderer - [Demo] Plugin page: Dynamic Icons Renderer(Free Bundle) Plugin | Bubble

It has Material Symbols(and Icons), Phosphor Icons, Lucide Icons:
Dynamic Icon