Proposal for revamping icons

Current API:

function getIconUrl(name: string, family: string, variant: string) {}

// base "resolver"
{
  resolver: (name: string, family = 'classic', variant = 'solid') => {
    return getIconUrl(name, family, variant);
  }
}

https://github.com/shoelace-style/webawesome/blob/9fc199a57548c89aab9ccdb14fdee0757c9c9f21/packages/webawesome/src/components/icon/icon.ts#L154

https://github.com/shoelace-style/webawesome/blob/next/packages/webawesome/src/components/icon/library.default.ts#L4-L127

Non-breaking Proposal

Pass the <wa-icon> element to the resolver.

function getIconUrl(name: string, family: string, variant: string, iconElement: WaIcon) {
}

{
  resolver: (name: string, family = 'classic', variant = 'solid', element = null) => {
    return getIconUrl(name, family, variant, element);
  }
}

Breaking Proposal

Pass the <wa-icon> element to the resolver.

function getIconUrl(iconElement: WaIcon) {
  const { name, family, variant } = iconElement
}

{
  resolver: (element) => {
    return getIconUrl(element);
  }
}

Why?

This allows a lot more flexibility in getting icon urls. A user could also for example pass a version, instead of us hardcoding the version. This also gives users more options for fetching icons based on attributes / properties on a given <wa-icon> element, instead of only ever getting the name, family, variant.

function getIconUrl(iconElement: WaIcon) {
  const { name, family, variant, version } = iconElement

  // https://github.com/shoelace-style/webawesome/pull/749> has a better way to fetch icons for custom kits.
  if (family === 'kit' || family === 'kit-duotone') {
    return `https://kit.fontawesome.com/${kitCode}/icons/${family}/custom/${name}.svg`;
  }

  if (version.startsWith("6")) {
    // Resolvers for v6

    return isPro
        ? `https://ka-p.fontawesome.com/releases/v${version}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
        : `https://ka-f.fontawesome.com/releases/v${version}/svgs/${folder}/${name}.svg`;
  }

  if (version.startsWith("7")) {
    // Resolvers for v7

    return isPro
        ? `https://ka-p.fontawesome.com/releases/v${version}/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
        : `https://ka-f.fontawesome.com/releases/v${version}/svgs/${folder}/${name}.svg`;
  }
}

Problems

This does not solve the with kit codes not knowing the version a user is on, but we could perhaps support a data-fa-version and perhaps have users define custom logic while waiting for a new Web Awesome release updated to the latest version of Font Awesome.

There is also the problem of some people may be serving these icons themselves, so we may want to add an extra function for getting an iconPath without the version + "ka-p.fontawesome.com" in the url so users can do just:

/assets/${folder}/${name}.svg

Right now to grab the correct "path" requires some finagling of the resolver by converting to URL and grabbing the pathname and slicing it. like this:

import { registerIconLibrary } from '@web.awesome.me/webawesome-pro';
import defaultLibrary from "@web.awesome.me/webawesome-pro/components/icon/library.default.ts"
registerIconLibrary('default', {
  resolver: (...args) => {
    // This will return something like: "ka-p.fontawesome.com", lets be fancy and strip the path.
    // https://github.com/shoelace-style/webawesome/blob/9fc199a57548c89aab9ccdb14fdee0757c9c9f21/packages/webawesome/src/components/icon/library.default.ts#L124-L126
    const url = new URL(defaultLibrary.resolver(...args))

    let pathname = url.pathname
    // split at "/", grab and then take everything from "/svgs" -> forward. Should get like /svgs/${folder}/${name}.svg
    const iconPath = decodeURIComponent(pathname.split(/\//).slice(3).join("/"))

    return new URL(`/assets/fontawesome-icons/${iconPath}`, document.baseURI).href
  },
});

this is useful for locally hosted assets.

https://discord.com/channels/739437527907303535/1470560925626011823/1472001732191064175

KonnorRogers/icon-proposal.md

Select an option

No results found