SolidJS•5mo ago

Phosphor icons

Hi Everyone I'm new on Solid JS, and I'm trying to get a cool icon font package. I see that Solid Icons have a lot of icons, but I want to use Phosphor icons. In my case I'm using the web package and import the .css file. I see that exists a package for Solid, but in terms of performance, this usage with the web version is a problem? Any suggestion? Thanks everyone! 🙏

7 Replies

Daniel Sousa @TutoDSOP•5mo ago

How I'm using it? 1. Install the package @phosphor-icons/web; 2. On app.tsx add the import import '@phosphor-icons/web/regular/style.css'; 3. Use like <i class="ph ph-arrow-right" />

Rvespula•5mo ago

use unplugin-icons/vite

Rvespula•5mo ago

https://icon-sets.iconify.design/ph/

Open Source Icon Sets - Iconify

Open source vector icons from all popular icon sets

Daniel Sousa @TutoDSOP•4mo ago

Hi @Rvespula I installed the iconify for solid ("@iconify-icon/solid"), but I think it's causing an error on deployment: Any idea?

Daniel Sousa @TutoDSOP•4mo ago

I'm totally desperate, I need to deploy the website and I can't

Rvespula•3mo ago

I'm sorry for the inconvenience, I was on vacation 😭

Daniel Sousa @TutoDSOP•3mo ago

No problem In the end I'm using the phosphor web fonts and map from the iconify format (icon selected on Sanity CMS) to the webfont

function getIconClassName(icon: string) {
  const parts = icon.split(':');

  if (parts.length === 2) {
    const [_prefix, suffix] = parts;

    if (suffix.endsWith('-light')) {
      return `ph-light ph-${suffix.replace('-light', '')}`;
    }

    if (suffix.endsWith('-bold')) {
      return `ph-bold ph-${suffix.replace('-bold', '')}`;
    }

    if (suffix.endsWith('-thin')) {
      return `ph-thin ph-${suffix.replace('-thin', '')}`;
    }

    if (suffix.endsWith('-duotone')) {
      return `ph-duotone ph-${suffix.replace('-duotone', '')}`;
    }

    return `ph ph-${suffix}`;
  }

  return icon;
}

function getIconClassName(icon: string) {
  const parts = icon.split(':');

  if (parts.length === 2) {
    const [_prefix, suffix] = parts;

    if (suffix.endsWith('-light')) {
      return `ph-light ph-${suffix.replace('-light', '')}`;
    }

    if (suffix.endsWith('-bold')) {
      return `ph-bold ph-${suffix.replace('-bold', '')}`;
    }

    if (suffix.endsWith('-thin')) {
      return `ph-thin ph-${suffix.replace('-thin', '')}`;
    }

    if (suffix.endsWith('-duotone')) {
      return `ph-duotone ph-${suffix.replace('-duotone', '')}`;
    }

    return `ph ph-${suffix}`;
  }

  return icon;
}

Basically this Because on sanity I have something like ph:devices or ph:devices-light Isn't the best way, but for now works, I'm trying to thinking a way of doing this during the request, but No idea how to do it The only idea that I have is change the icon on the response, but if I can do it on the sanity query seems better

Gaming

Programming

Phosphor icons