Helper as delivery mechanism

[sandstrom]

Awesome addon! 🏅

Have you thought about using a helper for icon delivery? We're using something like this and it's really fast. 🚀

Maybe this addon could break apart the two tasks of:

1. Retrieving icons from NPM etc. and subsetting
2. Delivery of icon into template/code. Could be left to the user, or could provide both helper and component as base (but I wouldn't go overboard with the component, easier to let people subclass the component if they need special stuff, aria, etc)

import { helper as buildHelper } from '@ember/component/helper';
import { htmlSafe } from '@ember/template';

const ICON_CLASS = 'icon';

const TYPE_CLASS = {
  brand: 'fab',
  light: 'fal',
  regular: 'far',
  solid: 'fas',
  duotone: 'fad',
};

const FALLBACK_TYPE = 'solid';

const ICON_PREFIX = 'fa-';
const SIZE_PREFIX = 'fa-';

// Simple icon helper
// `{{icon 'file-alt' type='regular' size='4x'}}` outputs `<i class='far fa-file-alt fa-4x'></i>`
// (do not rely on the `fa-` class names, consider them internal to this component)
export default buildHelper(function(args, options) {
  let name = args[0];
  let type = options.type || FALLBACK_TYPE;

  if (!Object.keys(TYPE_CLASS).includes(type)) {
    throw new Error(`Icon font type '${type}' not supported`);
  }

  let typeKlass = TYPE_CLASS[type];

  let klass = `${ICON_CLASS} ${typeKlass} ${ICON_PREFIX}${name}`;

  if (options.size) {
    klass += ` ${SIZE_PREFIX}${options.size}`;
  }

  if (options.class) {
    klass += ` ${options.class}`;
  }

  return htmlSafe(`<i class='${klass}'></i>`);
});