FEATURE: Update Font Awesome to v5.4.1 and SVGs (#6557)

* First take on subsetting svg icons * FontAwesome 5 svg subset WIP * Include icons from plugins/badges into svg sprite subset * add svg icon support to themes * Add spec for SvgSprite * Misc. SVG icon fixes * Use FA5 svgs in local-dates plugin * CSS adjustments, fix SVG icons in group flair * Use SVG icons in poll plugin * Add SVG icons to /wizard
2018-11-07 13:05:43 -05:00
parent 6b60646330
commit 005e1ecb9b
124 changed files with 6692 additions and 2211 deletions
@@ -0,0 +1,42 @@
+// FROM: https://github.com/Matt-Esch/virtual-dom
+// License: MIT
+
+function AttributeHook(namespace, value) {
+  if (!(this instanceof AttributeHook)) {
+    return new AttributeHook(namespace, value);
+  }
+
+  this.namespace = namespace;
+  this.value = value;
+}
+
+AttributeHook.prototype.hook = function(node, prop, prev) {
+  if (
+    prev &&
+    prev.type === "AttributeHook" &&
+    prev.value === this.value &&
+    prev.namespace === this.namespace
+  ) {
+    return;
+  }
+
+  node.setAttributeNS(this.namespace, prop, this.value);
+};
+
+AttributeHook.prototype.unhook = function(node, prop, next) {
+  if (
+    next &&
+    next.type === "AttributeHook" &&
+    next.namespace === this.namespace
+  ) {
+    return;
+  }
+
+  var colonPosition = prop.indexOf(":");
+  var localName = colonPosition > -1 ? prop.substr(colonPosition + 1) : prop;
+  node.removeAttributeNS(this.namespace, localName);
+};
+
+AttributeHook.prototype.type = "AttributeHook";
+
+export default AttributeHook;
@@ -1,37 +1,200 @@
 import { h } from "virtual-dom";
+import attributeHook from "discourse-common/lib/attribute-hook";
+import deprecated from "discourse-common/lib/deprecated";
+
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
 let _renderers = [];

 const REPLACEMENTS = {
  "d-tracking": "circle",
  "d-muted": "times-circle",
-  "d-regular": "circle-o",
+  "d-regular": "far-circle",
  "d-watching": "exclamation-circle",
-  "d-watching-first": "dot-circle-o",
+  "d-watching-first": "far-dot-circle",
  "d-drop-expanded": "caret-down",
  "d-drop-collapsed": "caret-right",
-  "d-unliked": "heart-o",
+  "d-unliked": "far-heart",
  "d-liked": "heart",
  "notification.mentioned": "at",
  "notification.group_mentioned": "at",
  "notification.quoted": "quote-right",
  "notification.replied": "reply",
  "notification.posted": "reply",
-  "notification.edited": "pencil",
+  "notification.edited": "pencil-alt",
  "notification.liked": "heart",
  "notification.liked_2": "heart",
  "notification.liked_many": "heart",
-  "notification.private_message": "envelope-o",
-  "notification.invited_to_private_message": "envelope-o",
-  "notification.invited_to_topic": "hand-o-right",
+  "notification.private_message": "far-envelope",
+  "notification.invited_to_private_message": "far-envelope",
+  "notification.invited_to_topic": "far-hand-point-right",
  "notification.invitee_accepted": "user",
  "notification.moved_post": "sign-out",
  "notification.linked": "link",
  "notification.granted_badge": "certificate",
  "notification.topic_reminder": "hand-o-right",
-  "notification.watching_first_post": "dot-circle-o",
+  "notification.watching_first_post": "far-dot-circle",
  "notification.group_message_summary": "group"
 };

+const fa4Replacements = {
+  "area-chart": "chart-area",
+  "bar-chart": "far-chart-bar",
+  "bar-chart-o": "far-chart-bar",
+  "chain-broken": "unlink",
+  "circle-thin": "far-circle",
+  "code-fork": "code-branch",
+  "commenting-o": "far-comment-dots",
+  "credit-card": "far-credit-card",
+  "drivers-license": "id-card",
+  "drivers-license-o": "far-id-card",
+  "external-link": "external-link-alt",
+  "external-link-square": "external-link-square-alt",
+  "eye-slash": "far-eye-slash",
+  "facebook-square": "fab-facebook-square",
+  "file-sound-o": "far-file-audio",
+  "file-text": "file-alt",
+  "file-text-o": "far-file-alt",
+  "files-o": "far-copy",
+  "floppy-o": "far-save",
+  "github-alt": "fab-github-alt",
+  "github-square": "fab-github-square",
+  "hacker-news": "fab-hacker-news",
+  "hand-grab-o": "far-hand-rock",
+  "id-badge": "far-id-badge",
+  "internet-explorer": "fab-internet-explorer",
+  "line-chart": "chart-line",
+  "linkedin-square": "fab-linkedin",
+  "list-alt": "far-list-alt",
+  "mail-forward": "share",
+  "mail-reply": "reply",
+  "mail-reply-all": "reply-all",
+  "map-marker": "map-marker-alt",
+  "mobile-phone": "mobile-alt",
+  "object-group": "far-object-group",
+  "object-ungroup": "far-object-ungroup",
+  "pencil-square": "pen-square",
+  "pencil-square-o": "far-edit",
+  "picture-o": "far-image",
+  "pie-chart": "chart-pie",
+  "rotate-left": "undo",
+  "rotate-right": "redo",
+  "send-o": "far-paper-plane",
+  "sign-in": "sign-in-alt",
+  "sign-out": "sign-out-alt",
+  "soccer-ball-o": "far-futbol",
+  "sort-alpha-asc": "sort-alpha-down",
+  "sort-alpha-desc": "sort-alpha-up",
+  "sort-amount-asc": "sort-amount-down",
+  "sort-amount-desc": "sort-amount-up",
+  "sort-asc": "sort-up",
+  "sort-desc": "sort-down",
+  "sort-numeric-asc": "sort-numeric-down",
+  "sort-numeric-desc": "sort-numeric-up",
+  "star-half-empty": "far-star-half",
+  "star-half-full": "far-star-half",
+  "thumb-tack": "thumbtack",
+  "thumbs-o-down": "far-thumbs-down",
+  "thumbs-o-up": "far-thumbs-up",
+  "times-rectangle": "window-close",
+  "times-rectangle-o": "far-window-close",
+  "toggle-down": "far-caret-square-down",
+  "toggle-left": "far-caret-square-left",
+  "toggle-right": "far-caret-square-right",
+  "toggle-up": "far-caret-square-up",
+  "trash-o": "far-trash-alt",
+  "twitter-square": "fab-twitter-square",
+  "vcard-o": "far-address-card",
+  "video-camera": "video",
+  "vimeo-square": "fab-vimeo-square",
+  "wheelchair-alt": "fab-accessible-icon",
+  "window-maximize": "far-window-maximize",
+  "window-restore": "far-window-restore",
+  "youtube-play": "fab-youtube",
+  "youtube-square": "fab-youtube-square",
+  apple: "fab-apple",
+  bank: "university",
+  cab: "taxi",
+  calendar: "calendar-alt",
+  chain: "link",
+  clipboard: "far-clipboard",
+  clone: "far-clone",
+  close: "times",
+  cny: "yen-sign",
+  commenting: "far-comment-dots",
+  compass: "far-compass",
+  copyright: "far-copyright",
+  cutlery: "utensils",
+  dashboard: "tachometer-alt",
+  deafness: "deaf",
+  dedent: "outdent",
+  diamond: "far-gem",
+  dollar: "dollar-sign",
+  exchange: "exchange-alt",
+  eye: "far-eye",
+  eyedropper: "eye-dropper",
+  facebook: "fab-facebook-f",
+  feed: "rss",
+  flash: "bolt",
+  gbp: "pound-sign",
+  gear: "cog",
+  gears: "cogs",
+  github: "fab-github",
+  glass: "glass-martini",
+  glass: "glass-martini",
+  google: "fab-google",
+  group: "users",
+  header: "heading",
+  hotel: "bed",
+  ils: "shekel-sign",
+  image: "far-image",
+  inr: "rupee-sign",
+  instagram: "fab-instagram",
+  institution: "university",
+  intersex: "transgender",
+  jpy: "yen-sign",
+  legal: "gavel",
+  linkedin: "fab-linkedin-in",
+  linode: "fab-linode",
+  linux: "fab-linux",
+  meetup: "fab-meetup",
+  mobile: "mobile-alt",
+  navicon: "bars",
+  paste: "far-clipboard",
+  pencil: "pencil-alt",
+  photo: "far-image",
+  refresh: "sync",
+  registered: "far-registered",
+  remove: "times",
+  remove: "times",
+  reorder: "bars",
+  repeat: "redo",
+  rmb: "yen-sign",
+  rouble: "ruble-sign",
+  ruble: "ruble-sign",
+  rupee: "rupee-sign",
+  s15: "bath",
+  scissors: "cut",
+  send: "paper-plane",
+  shekel: "shekel-sign",
+  shield: "shield-alt",
+  signing: "sign-language",
+  support: "far-life-ring",
+  tablet: "tablet-alt",
+  tachometer: "tachometer-alt",
+  television: "tv",
+  ticket: "ticket-alt",
+  trash: "trash-alt",
+  twitter: "fab-twitter",
+  unsorted: "sort",
+  vcard: "address-card",
+  vimeo: "fab-vimeo-v",
+  warning: "exclamation-triangle",
+  whatsapp: "fab-whatsapp",
+  windows: "fab-windows",
+  yahoo: "fab-yahoo",
+  youtube: "fab-youtube"
+};
+
 export function replaceIcon(source, destination) {
  REPLACEMENTS[source] = destination;
 }
@@ -59,6 +222,13 @@ export function iconNode(id, params) {
  return renderIcon("node", id, params);
 }

+export function convertIconClass(icon) {
+  return icon
+    .replace("far fa-", "far-")
+    .replace("fab fa-", "fab-")
+    .replace("fa-", "");
+}
+
 // TODO: Improve how helpers are registered for vdom compliation
 if (typeof Discourse !== "undefined") {
  Discourse.__widget_helpers.iconNode = iconNode;
@@ -68,58 +238,114 @@ export function registerIconRenderer(renderer) {
  _renderers.unshift(renderer);
 }

-// Support for font awesome icons
-function faClasses(icon, params) {
-  let classNames = `fa fa-${icon.replacementId || icon.id} d-icon d-icon-${
-    icon.id
-  }`;
+function iconClasses(icon, params) {
+  // "notification." is invalid syntax for classes, use replacement instead
+  const dClass =
+    icon.replacementId && icon.id.indexOf("notification.") > -1
+      ? icon.replacementId
+      : icon.id;

-  if (params) {
-    if (params.modifier) {
-      classNames += " fa-" + params.modifier;
-    }
-    if (params["class"]) {
-      classNames += " " + params["class"];
-    }
+  let classNames = `fa d-icon d-icon-${dClass} svg-icon`;
+
+  if (params && params["class"]) {
+    classNames += " " + params["class"];
  }
+
  return classNames;
 }

+function warnIfMissing(id) {
+  if (
+    typeof Discourse !== "undefined" &&
+    Discourse.Environment === "development" &&
+    Discourse.SvgIconList &&
+    Discourse.SvgIconList.indexOf(id) === -1
+  ) {
+    console.warn(`The icon "${id}" is missing from the SVG subset.`);
+  }
+}
+
+function warnIfDeprecated(oldId, newId) {
+  if (
+    typeof Discourse !== "undefined" &&
+    Discourse.Environment === "development" &&
+    !Ember.testing
+  ) {
+    deprecated(`Icon "${oldId}" is now "${newId}".`);
+  }
+}
+
+function handleIconId(icon) {
+  let id = icon.replacementId || icon.id || "";
+
+  if (fa4Replacements.hasOwnProperty(id)) {
+    warnIfDeprecated(id, fa4Replacements[id]);
+    id = fa4Replacements[id];
+  } else if (id.substr(id.length - 2) === "-o") {
+    let newId = "far-" + id.replace("-o", "");
+    warnIfDeprecated(id, newId);
+    id = newId;
+  }
+
+  // TODO: clean up "thumbtack unpinned" at source instead of here
+  id = id.replace(" unpinned", "");
+
+  warnIfMissing(id);
+  return id;
+}
+
 // default resolver is font awesome
 registerIconRenderer({
  name: "font-awesome",

  string(icon, params) {
-    let tagName = params.tagName || "i";
-    let html = `<${tagName} class='${faClasses(icon, params)}'`;
-    if (params.title) {
-      html += ` title='${I18n.t(params.title).replace(/'/g, "&#39;")}'`;
-    }
+    const id = handleIconId(icon);
+    let html = `<svg class='${iconClasses(icon, params)} svg-string'`;
+
    if (params.label) {
      html += " aria-hidden='true'";
    }
-    html += `></${tagName}>`;
+    html += ` xmlns="${SVG_NAMESPACE}"><use xlink:href="#${id}" /></svg>`;
    if (params.label) {
      html += `<span class='sr-only'>${params.label}</span>`;
    }
+    if (params.title) {
+      html = `<span class="svg-icon-title" title='${I18n.t(
+        params.title
+      ).replace(/'/g, "&#39;")}'>${html}</span>`;
+    }
    return html;
  },

  node(icon, params) {
-    let tagName = params.tagName || "i";
+    const id = handleIconId(icon);
+    const classes = iconClasses(icon, params) + " svg-node";

-    const properties = {
-      className: faClasses(icon, params),
-      attributes: { "aria-hidden": true }
-    };
+    const svg = h(
+      "svg",
+      {
+        attributes: { class: classes, "aria-hidden": true },
+        namespace: SVG_NAMESPACE
+      },
+      [
+        h("use", {
+          "xlink:href": attributeHook("http://www.w3.org/1999/xlink", `#${id}`),
+          namespace: SVG_NAMESPACE
+        })
+      ]
+    );

    if (params.title) {
-      properties.attributes.title = params.title;
-    }
-    if (params.label) {
-      return h(tagName, properties, h("span.sr-only", I18n.t(params.label)));
+      return h(
+        "span",
+        {
+          title: params.title,
+          attributes: { class: "svg-icon-title" }
+        },
+        [svg]
+      );
    } else {
-      return h(tagName, properties);
+      return svg;
    }
  }
 });
@@ -2,19 +2,15 @@ import computed from "ember-addons/ember-computed-decorators";

 export default Ember.Component.extend({
  tagName: "li",
-  classNameBindings: ["topicStatusIcon"],

  @computed("topic.pinned", "topic.closed", "topic.archived")
  topicStatusIcon(pinned, closed, archived) {
    if (pinned) {
-      return "topic-pinned";
+      return "thumbtack";
    }
-    if (closed) {
-      return "topic-closed";
+    if (closed || archived) {
+      return "lock";
    }
-    if (archived) {
-      return "topic-archived";
-    }
-    return "topic-open";
+    return "far-file-alt";
  }
 });
@@ -1,5 +1,6 @@
 import computed from "ember-addons/ember-computed-decorators";
 import { escapeExpression } from "discourse/lib/utilities";
+import { convertIconClass } from "discourse-common/lib/icon-library";

 export default Ember.Component.extend({
  classNames: ["group-flair-inputs"],
@@ -14,6 +15,11 @@ export default Ember.Component.extend({
    return flairURL && flairURL.substr(0, 3) === "fa-";
  },

+  @computed("model.flair_url", "flairPreviewIcon")
+  flairPreviewIconUrl(flairURL, flairPreviewIcon) {
+    return flairPreviewIcon ? convertIconClass(flairURL) : "";
+  },
+
  @computed("model.flair_url", "flairPreviewIcon")
  flairPreviewImage(flairURL, flairPreviewIcon) {
    return flairURL && !flairPreviewIcon;
@@ -17,7 +17,7 @@ export default Ember.Component.extend(

    click(e) {
      // only pin unpin for now
-      if (this.get("canAct") && $(e.target).hasClass("d-icon-thumb-tack")) {
+      if (this.get("canAct") && $(e.target).hasClass("d-icon-thumbtack")) {
        const topic = this.get("topic");
        topic.get("pinned") ? topic.clearPin() : topic.rePin();
      }
@@ -58,10 +58,10 @@ export default Ember.Component.extend(
        renderIconIf("topic.archived", "lock", "archived");
      }

-      renderIconIf("topic.pinned", "thumb-tack", "pinned", this.get("canAct"));
+      renderIconIf("topic.pinned", "thumbtack", "pinned", this.get("canAct"));
      renderIconIf(
        "topic.unpinned",
-        "thumb-tack",
+        "thumbtack",
        "unpinned",
        this.get("canAct")
      );
@@ -196,7 +196,7 @@ export default Ember.Controller.extend({

  @computed("expanded")
  searchAdvancedIcon(expanded) {
-    return iconHTML(expanded ? "caret-down fa-fw" : "caret-right fa-fw");
+    return iconHTML(expanded ? "caret-down" : "caret-right");
  },

  @computed("page")
@@ -1,14 +1,15 @@
 import { htmlHelper } from "discourse-common/lib/helpers";
-import { iconHTML } from "discourse-common/lib/icon-library";
+import { iconHTML, convertIconClass } from "discourse-common/lib/icon-library";

 export default htmlHelper(function({ icon, image }) {
  if (!Ember.isEmpty(image)) {
    return `<img src='${image}'>`;
  }

-  if (Ember.isEmpty(icon) || icon.indexOf("fa-") !== 0) {
+  if (Ember.isEmpty(icon) || icon.indexOf("fa-") < 0) {
    return "";
  }

-  return iconHTML(icon.replace("fa-", ""));
+  icon = convertIconClass(icon);
+  return iconHTML(icon);
 });
@@ -0,0 +1,11 @@
+import svgSpriteLoader from "discourse/lib/svg-sprite-loader";
+
+export default {
+  name: "svg-sprite-fontawesome",
+
+  initialize() {
+    if (Discourse && Discourse.SvgSpritePath) {
+      svgSpriteLoader.load(Discourse.SvgSpritePath, "fontawesome");
+    }
+  }
+};
@@ -1,5 +1,6 @@
 import loadScript from "discourse/lib/load-script";
 import { escapeExpression } from "discourse/lib/utilities";
+import { renderIcon } from "discourse-common/lib/icon-library";

 export default function($elem) {
  if (!$elem) {
@@ -57,6 +58,7 @@ export default function($elem) {
                '<a class="image-source-link" href="' +
                  href +
                  '">' +
+                  renderIcon("string", "download") +
                  I18n.t("lightbox.download") +
                  "</a>"
              );
@@ -1,4 +1,5 @@
 import { h } from "virtual-dom";
+import { renderIcon } from "discourse-common/lib/icon-library";

 const _decorators = [];

@@ -35,12 +36,13 @@ export default function renderTopicFeaturedLink(topic) {
  if (meta) {
    return `<a class="topic-featured-link" rel="${meta.rel}" target="${
      meta.target
-    }" href="${meta.href}">${meta.domain}</a>`;
+    }" href="${meta.href}">${renderIcon("string", "external-link-alt")} ${
+      meta.domain
+    }</a>`;
  } else {
    return "";
  }
 }
-
 export function topicFeaturedLinkNode(topic) {
  const meta = extractLinkMeta(topic);
  if (meta) {
@@ -49,7 +51,7 @@ export function topicFeaturedLinkNode(topic) {
      {
        attributes: { href: meta.href, rel: meta.rel, target: meta.target }
      },
-      meta.domain
+      [renderIcon("node", "external-link-alt"), meta.domain]
    );
  }
 }
@@ -0,0 +1,18 @@
+import { ajax } from "discourse/lib/ajax";
+
+export default {
+  name: "svg-sprite-loader",
+  load(spritePath, spriteName) {
+    const c = "svg-sprites";
+    const $cEl = `#${c}`;
+    const $spriteEl = `${$cEl} .${spriteName}`;
+
+    if ($($cEl).length === 0) $("body").append(`<div id="${c}">`);
+    if ($($spriteEl).length === 0)
+      $($cEl).append(`<div class="${spriteName}">`);
+
+    ajax(spritePath, { type: "GET", dataType: "text" }).then(data => {
+      $($spriteEl).html(data);
+    });
+  }
+};
@@ -93,6 +93,11 @@ export function findAll(siteSettings, capabilities, isMobileDevice) {
    methods.forEach(m => m.set("full_screen_login", true));
  }

+  // exclude FA icon for Google, uses custom SVG
+  methods.forEach(m =>
+    m.set("hasRegularIcon", m.get("name") === "google_oauth2" ? false : true)
+  );
+
  return methods;
 }

@@ -45,11 +45,11 @@ export default Ember.Object.extend({
    }

    if (topic.get("pinned")) {
-      results.push({ icon: "thumb-tack", key: "pinned" });
+      results.push({ icon: "thumbtack", key: "pinned" });
    }

    if (topic.get("unpinned")) {
-      results.push({ icon: "thumb-tack unpinned", key: "unpinned" });
+      results.push({ icon: "thumbtack", key: "unpinned" });
    }

    if (topic.get("invisible")) {
@@ -74,7 +74,6 @@ export default Ember.Object.extend({
    if (results.length === 0 && defaultIcon) {
      this.set("showDefault", defaultIcon);
    }
-
    return results;
  }
 });
@@ -1,3 +1,5 @@
+{{d-icon topicStatusIcon}}
+
 <a class='title' href="{{unbound topic.lastUnreadUrl}}">
  {{text-overflow class="overflow" text=topic.fancyTitle}}
 </a>
@@ -1 +1,5 @@
-{{#each colors as |c|}}{{color-picker-choice color=c usedColors=usedColors selectColor="selectColor"}}{{/each}}
+{{#each colors as |c|}}
+  {{#color-picker-choice color=c usedColors=usedColors selectColor="selectColor"}}
+    {{d-icon 'check'}}
+  {{/color-picker-choice}}
+{{/each}}
@@ -39,7 +39,7 @@
      <div class="avatar-flair demo {{flairPreviewClasses}}" style={{flairPreviewStyle}}></div>
    {{else}}
      <div class="avatar-flair demo {{flairPreviewClasses}}" style={{flairPreviewStyle}}>
-        <i class="fa {{model.flair_url}}"></i>
+        {{d-icon flairPreviewIconUrl}}
      </div>
    {{/if}}
  </div>
@@ -1,5 +1,12 @@
 {{#each buttons as |b|}}
-  <button class="btn btn-social {{b.name}}" {{action "externalLogin" b}}>{{b.title}}</button>
+  <button class="btn btn-social {{b.name}}" {{action "externalLogin" b}}>
+    {{#if b.hasRegularIcon}}
+      {{d-icon b.name}}
+    {{else}}
+      <svg class="fa d-icon d-icon-custom-google-oauth2 svg-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
+    {{/if}}
+    {{b.title}}
+  </button>
 {{/each}}

 {{#if showLoginWithEmailLink}}
@@ -7,6 +14,6 @@
    action="emailLogin"
    label="email_login.button_label"
    disabled=processingEmailLink
-    icon="envelope-o"
+    icon="far-envelope"
    class="login-with-email-button"}}
 {{/if}}
@@ -5,7 +5,7 @@
 {{~#if status.href ~}}
 <a href='{{status.href}}' title='{{status.title}}' class='topic-status {{status.extraClasses}}'>{{d-icon status.icon}}</a>
 {{~else ~}}
-<{{status.openTag}} title='{{status.title}}' class='topic-status'>{{d-icon status.icon}}</{{status.closeTag}}>
+<{{status.openTag}} title='{{status.title}}' class='topic-status'>{{d-icon status.icon class=status.key}}</{{status.closeTag}}>
 {{~/if ~}}
 {{~/each}}
 {{~#if view.showDefault~}}{{d-icon view.showDefault}}{{~/if ~}}
@@ -1,5 +1,5 @@
 import { createWidget } from "discourse/widgets/widget";
-import { h } from "virtual-dom";
+import { iconNode, convertIconClass } from "discourse-common/lib/icon-library";

 createWidget("avatar-flair", {
  tagName: "div.avatar-flair",
@@ -7,7 +7,7 @@ createWidget("avatar-flair", {
  isIcon(attrs) {
    return (
      attrs.primary_group_flair_url &&
-      attrs.primary_group_flair_url.substr(0, 3) === "fa-"
+      attrs.primary_group_flair_url.includes("fa-")
    );
  },

@@ -52,20 +52,8 @@ createWidget("avatar-flair", {

  html(attrs) {
    if (this.isIcon(attrs)) {
-      return [
-        h("i", {
-          className: "fa " + attrs.primary_group_flair_url,
-          attributes: {
-            style: attrs.primary_group_flair_color
-              ? "color: #" +
-                Handlebars.Utils.escapeExpression(
-                  attrs.primary_group_flair_color
-                ) +
-                "; "
-              : ""
-          }
-        })
-      ];
+      const icon = convertIconClass(attrs.primary_group_flair_url);
+      return [iconNode(icon)];
    } else {
      return [];
    }
@@ -37,12 +37,12 @@ const icons = {
  "autoclosed.disabled": "unlock-alt",
  "archived.enabled": "folder",
  "archived.disabled": "folder-open",
-  "pinned.enabled": "thumb-tack",
-  "pinned.disabled": "thumb-tack unpinned",
-  "pinned_globally.enabled": "thumb-tack",
-  "pinned_globally.disabled": "thumb-tack unpinned",
-  "banner.enabled": "thumb-tack",
-  "banner.disabled": "thumb-tack unpinned",
+  "pinned.enabled": "thumbtack",
+  "pinned.disabled": "thumbtack unpinned",
+  "pinned_globally.enabled": "thumbtack",
+  "pinned_globally.disabled": "thumbtack unpinned",
+  "banner.enabled": "thumbtack",
+  "banner.disabled": "thumbtack unpinned",
  "visible.enabled": "eye",
  "visible.disabled": "eye-slash",
  split_topic: "sign-out",
@@ -1,6 +1,5 @@
 import { createWidget } from "discourse/widgets/widget";
 import { h } from "virtual-dom";
-import { iconNode } from "discourse-common/lib/icon-library";

 function description(attrs) {
  const daysSince = attrs.daysSince;
@@ -21,7 +20,7 @@ export default createWidget("time-gap", {

  html(attrs) {
    return [
-      h("div.topic-avatar", iconNode("fw")),
+      h("div.topic-avatar", ""),
      h("div.small-action-desc.timegap", description(attrs))
    ];
  }
@@ -196,7 +196,7 @@ export default createWidget("topic-admin-menu", {
        className: "topic-admin-pin",
        buttonClass: "btn-default",
        action: "showFeatureTopic",
-        icon: "thumb-tack",
+        icon: "thumbtack",
        label: featured ? "actions.unpin" : "actions.pin"
      });
    }
@@ -37,8 +37,8 @@ export default createWidget("topic-status", {
      renderIconIf("archived", "lock", "archived");
    }

-    renderIconIf("pinned", "thumb-tack", "pinned");
-    renderIconIf("unpinned", "thumb-tack", "unpinned");
+    renderIconIf("pinned", "thumbtack", "pinned");
+    renderIconIf("unpinned", "thumbtack", "unpinned");
    renderIconIf("invisible", "eye-slash", "invisible");

    return result;
@@ -34,6 +34,11 @@
  }

  Discourse.HighlightJSPath = setupData.highlightJsPath;
+  Discourse.SvgSpritePath = setupData.svgSpritePath;
+
+  if (Discourse.Environment === "development") {
+    Discourse.SvgIconList = setupData.svgIconList;
+  }

  if (setupData.s3BaseUrl) {
    Discourse.S3CDN = setupData.s3Cdn;
@@ -3,6 +3,7 @@ import TagsMixin from "select-kit/mixins/tags";
 import { default as computed } from "ember-addons/ember-computed-decorators";
 import renderTag from "discourse/lib/render-tag";
 import { escapeExpression } from "discourse/lib/utilities";
+import { iconHTML } from "discourse-common/lib/icon-library";
 const { get, isEmpty, run, makeArray } = Ember;

 export default ComboBox.extend(TagsMixin, {
@@ -67,7 +68,7 @@ export default ComboBox.extend(TagsMixin, {

  @computed("hasReachedMaximum")
  caretIcon(hasReachedMaximum) {
-    return hasReachedMaximum ? null : "plus fa-fw";
+    return hasReachedMaximum ? null : "plus";
  },

  @computed("tags")
@@ -125,7 +126,7 @@ export default ComboBox.extend(TagsMixin, {
          <button aria-label="${tag}" title="${tag}" class="selected-tag ${
          isHighlighted ? "is-highlighted" : ""
        }" data-value="${tag}">
-            ${tag}
+            ${tag} ${iconHTML("times")}
          </button>
        `;
      });
@@ -20,7 +20,7 @@ export default DropdownSelectBoxComponent.extend({
    content.label = `${title}${iconHTML("caret-down")}`.htmlSafe();
    content.title = title;
    content.name = state;
-    content.icon = `thumb-tack${state === "unpinned" ? " unpinned" : ""}`;
+    content.icon = `thumbtack${state === "unpinned" ? " unpinned" : ""}`;
    return content;
  },

@@ -33,12 +33,12 @@ export default DropdownSelectBoxComponent.extend({
        id: "pinned",
        name: I18n.t("topic_statuses.pinned" + globally + ".title"),
        description: I18n.t("topic_statuses.pinned" + globally + ".help"),
-        icon: "thumb-tack"
+        icon: "thumbtack"
      },
      {
        id: "unpinned",
        name: I18n.t("topic_statuses.unpinned.title"),
-        icon: "thumb-tack unpinned",
+        icon: "thumbtack unpinned",
        description: I18n.t("topic_statuses.unpinned.help")
      }
    ]);
@@ -2,4 +2,4 @@
  {{{label}}}
 </span>

-{{d-icon caretIcon class="caret-icon fa-fw"}}
+{{d-icon caretIcon class="caret-icon"}}
@@ -14,4 +14,4 @@
  </button>
 {{/if}}

-{{d-icon caretIcon class="caret-icon fa-fw"}}
+{{d-icon caretIcon class="caret-icon"}}
@@ -24,4 +24,4 @@
  </button>
 {{/if}}

-{{d-icon caretIcon class="caret-icon fa-fw"}}
+{{d-icon caretIcon class="caret-icon"}}
@@ -1,3 +1,4 @@
 <div class="body">
  {{badge}}
+  {{d-icon 'times'}}
 </div>
@@ -8,6 +8,7 @@
      {{{label}}}
    {{/if}}
  </span>
+  {{d-icon 'times'}}
 </div>

 {{#if footerContent}}<div class="footer">{{footerContent}}</div>{{/if}}
@@ -6,4 +6,4 @@
  {{/if}}
 </span>

-{{d-icon caretIcon class="caret-icon fa-fw"}}
+{{d-icon caretIcon class="caret-icon"}}