Building custom phosphor icons from the Figma API #66

kfayelun · 2023-09-18T17:04:11Z

kfayelun
Sep 18, 2023

Hi phosphorians 👋

Great library you've built here, thanks so much for providing this to us all, open source! We love using your icons and would love to get the same usability out of the small set of custom icons that we have. So when we saw the custom icons section here in the readme we wanted to give it a try.

Currently we're fetching the custom icons from Figma with the Figma API, and using svgr/cli to make them into react components. But now I want to get these over on the same form as the phosphor ones, where all the weights are in the same file as described in your docs. As svgr loops through the svgs and runs a transformation per file, I don't quite see how I can get the different weights into the same file.

Maybe my googling skills have failed me, but I couldn't find any examples or articles on this. This might rather belong under the svgr library, but guessing others who use phosphor often also use svgr and have tried this before me?

Hope so 🤞
Thanks!!

rektdeckard · 2023-09-18T20:34:18Z

rektdeckard
Sep 18, 2023
Maintainer

Thanks for the kind words, @kfayelun!

I don't know for sure whether svgr supports anything custom in terms of merging 6 SVG assets into a single component, inserting additional component logic, or any of that. But you could write your own code generation script -- this is actually how we build the react library from SVG files internally (see /scripts/assemble.mjs for reference).

For example:

import path from "node:path";
import { writeFile } from "node:fs/promises";
import { parse } from "svg-parser";

// Where we want to spit out generated components
const OUT_DIR = "./out/";

(async function main() {
  // Fetch custom icon data
  const icons = await fetchIcons();

  // Extract the child elements of each SVG
  const paths = Object.entries(icons).reduce((acc, [name, svgstrs]) => {
    // We are using `svg-parser` here to turn an SVG string into JS object so that
    // properties are easier to access an manipulate, but you could use RegEx or something else.
    acc[name] = svgstrs.map((i) => parse(i).children[0].children);
    return acc;
  }, {});

  // Generate code for each icon
  Object.entries(paths).forEach(([name, paths]) => {
    writeIcon(name, paths);
  });
})();

async function writeIcon(name, paths) {
  const weights = ["regular", "thin", "light", "bold", "fill", "duotone"];

  // Create stringified Map entries, per the Custom Icon specification
  const pathMap = weights
    .map(
      (weight, i) =>
      // NOTE: in Phosphor's case, we assume that all weights besides `duotone` contain only a single
      // <path> element inside the SVG, and `duotone` contains exactly 2 <path> elements, with
      // one set to 20% opacity.
      // You may need some custom logic here based on how you construct your custom icons.
        `["${weight}", ${
          paths[i].length === 1
            ? `<path d="${paths[i][0].properties.d}" />`
            : "<>" +
              paths[i]
                .map((path) =>
                    `<path d="${path.properties.d}"\
                    ${path.properties.opacity ? ` opacity="0.2"` : ""}
                   />`
                )
                .join("\n") +
              "</>"
        }]`
    )
    .join(", ");

  const componentStr = `\
import { forwardRef, ReactElement } from "react";
import { Icon, IconBase, IconWeight } from "@phosphor-icons/react";

const weights = new Map<IconWeight, ReactElement>([${pathMap}]);

const ${name}: Icon = forwardRef((props, ref) => (
    <IconBase ref={ref} {...props} weights={weights} />
  ));
  
${name}.displayName = "${name}";

export default ${name};
`;

  // Emit component file
  return writeFile(path.join(OUT_DIR, `${name}.tsx`), componentStr);
}

/**
 * This is just an example of an API that returns some custom icons, in this case in the form:
 * @example
 * {
 *   IconName: [
 *     regularWeightSVGString,
 *     thinWeightSVGString,
 *     lightWeightSVGString,
 *     boldWeightSVGString,
 *     fillWeightSVGString,
 *     duotoneWeightSVGAString,
 *   ],
 *   OtherIconName: [...],
 * }
 */
async function fetchIcons() {
  return {
    HelloIcon: [
      `<svg width="257" height="257" viewBox="0 0 257 257" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M224.355 112.856H200.355C198.233 112.856 196.198 113.699 194.698 115.199C193.198 116.699 192.355 118.734 192.355 120.856C192.355 122.978 193.198 125.013 194.698 126.513C196.198 128.013 198.233 128.856 200.355 128.856L162.5 144.5C160.6 164.979 205.094 168.505 190.55 183.047C176.006 197.59 173.479 175.602 153 177.5L136.355 95.856C143.896 93.9089 190.327 102.302 194.698 95.856C199.069 89.4098 161.081 68.5665 160.1 60.84C159.119 53.1135 155.353 46.0101 149.509 40.8614C143.665 35.7127 136.144 32.8721 128.355 32.8721C120.566 32.8721 113.045 35.7127 107.201 40.8614C101.357 46.0101 97.5915 53.1135 96.6101 60.84C95.6287 68.5665 51.9838 89.4098 56.3551 95.856C60.7264 102.302 112.814 93.9089 120.355 95.856L107.201 177.5C86.7219 175.602 80.7045 197.59 66.1605 183.047C51.6165 168.505 98.5103 161.979 96.6101 141.5L56.3551 128.856C58.4768 128.856 60.5116 128.013 62.0119 126.513C63.5122 125.013 64.3551 122.978 64.3551 120.856C64.3551 118.734 63.5122 116.699 62.0119 115.199C60.5116 113.699 58.4768 112.856 56.3551 112.856H32.3551C30.2333 112.856 28.1985 113.699 26.6982 115.199C25.1979 116.699 24.3551 118.734 24.3551 120.856C24.3551 148.439 35.3122 174.891 54.816 194.395C74.3197 213.899 100.773 224.856 128.355 224.856C155.938 224.856 182.39 213.899 201.894 194.395C221.398 174.891 232.355 148.439 232.355 120.856C232.355 118.734 231.512 116.699 230.012 115.199C228.512 113.699 226.477 112.856 224.355 112.856ZM112.355 64.856C112.355 61.6915 113.293 58.5981 115.052 55.9669C116.81 53.3357 119.309 51.2849 122.232 50.0739C125.156 48.8629 128.373 48.5461 131.477 49.1634C134.58 49.7808 137.431 51.3046 139.669 53.5423C141.906 55.7799 143.43 58.6309 144.048 61.7346C144.665 64.8383 144.348 68.0553 143.137 70.9789C141.926 73.9025 139.875 76.4014 137.244 78.1595C134.613 79.9176 131.52 80.856 128.355 80.856C124.112 80.856 120.042 79.1703 117.041 76.1697C114.041 73.1691 112.355 69.0995 112.355 64.856Z" fill="black"/>
        </svg>      
        `,
      `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M224 116H200C198.939 116 197.922 116.421 197.172 117.172C196.421 117.922 196 118.939 196 120C196 121.061 196.421 122.078 197.172 122.828C197.922 123.579 198.939 124 200 124H219.91C218.879 146.984 209.286 168.75 193.018 185.018C176.75 201.286 154.984 210.879 132 211.91V91.71C139.006 90.6987 145.37 87.0712 149.809 81.5574C154.249 76.0436 156.435 69.0528 155.928 61.992C155.421 54.9313 152.259 48.3245 147.077 43.5015C141.895 38.6785 135.079 35.9972 128 35.9972C120.921 35.9972 114.105 38.6785 108.923 43.5015C103.741 48.3245 100.579 54.9313 100.072 61.992C99.5649 69.0528 101.751 76.0436 106.191 81.5574C110.63 87.0712 116.994 90.6987 124 91.71V211.91C101.016 210.879 79.25 201.286 62.9817 185.018C46.7135 168.75 37.1207 146.984 36.09 124H56C57.0609 124 58.0783 123.579 58.8284 122.828C59.5786 122.078 60 121.061 60 120C60 118.939 59.5786 117.922 58.8284 117.172C58.0783 116.421 57.0609 116 56 116H32C30.9391 116 29.9217 116.421 29.1716 117.172C28.4214 117.922 28 118.939 28 120C28 146.522 24.7464 193.156 43.5 211.91C62.2536 230.664 101.478 220 128 220C154.522 220 201.156 230.664 219.91 211.91C238.664 193.156 228 146.522 228 120C228 118.939 227.579 117.922 226.828 117.172C226.078 116.421 225.061 116 224 116ZM108 64C108 60.0444 109.173 56.1776 111.371 52.8886C113.568 49.5996 116.692 47.0362 120.346 45.5224C124.001 44.0087 128.022 43.6126 131.902 44.3843C135.781 45.156 139.345 47.0608 142.142 49.8579C144.939 52.6549 146.844 56.2186 147.616 60.0982C148.387 63.9778 147.991 67.9992 146.478 71.6537C144.964 75.3082 142.4 78.4318 139.111 80.6294C135.822 82.827 131.956 84 128 84C122.696 84 117.609 81.8929 113.858 78.1421C110.107 74.3914 108 69.3043 108 64Z" fill="black"/>
        </svg>
        `,
      `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M42.6115 41.6099C42.6115 52.1723 46.1486 62.3089 46.1486 72.9386C46.1486 77.5494 46.6539 82.1251 46.6539 86.694C46.6539 89.5681 47.0599 92.25 47.6645 95.0595C47.8782 96.0525 47.7737 98.2582 48.6751 98.7089M89.0992 38.0728C89.3348 42.7858 90.7591 47.5982 91.2327 52.3335C91.9634 59.6411 92.6363 66.587 92.6363 73.9492C92.6363 77.1648 92.9322 80.5368 92.3837 83.7183C92.188 84.8532 91.6665 86.057 91.6257 87.1993C91.601 87.8895 91.2143 91.7286 90.6151 91.1294M37.0532 74.4545C44.5425 72.8778 52.1942 71.5169 59.7356 70.1594C64.8181 69.2446 70.065 69.453 75.0631 68.3909C79.45 67.4587 83.074 66.3697 87.6114 66.3697C91.1823 66.3697 94.7843 65.3591 98.1946 65.3591M137 61C137 69.2315 138.146 77.184 139.049 85.3106C139.424 88.686 140.091 91.985 140.509 95.3324C140.783 97.5244 141.042 100.995 141.042 96.3711M132.05 36.5569C132.05 33.4395 129.455 32.5013 127.277 34.2831C124.481 36.571 130.332 36.2537 131.544 35.041M99 146C81 146.539 99 178.806 99 184M133.356 146C133.356 155.124 128.562 167.827 137 176M181.272 188C181.272 190.015 181.425 192.084 180.992 194.064C180.04 198.412 176.094 201.956 172.963 204.871C167.483 209.973 159.874 214.291 153.088 217.307C143.722 221.47 133.327 223.312 123.668 226.656C116.901 228.998 109.539 229.94 102.417 229.94C96.0402 229.94 87.6369 231.266 81.728 228.312C77.4579 226.177 73.6053 223.952 68.8428 222.894C66.4685 222.366 64.84 219.256 63.6494 217.307C62.5976 215.586 61.1411 213.966 60 212.254" stroke="black" stroke-width="12" stroke-linecap="round"/>
          </svg>
          `,
      `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M42.6115 41.6099C42.6115 52.1723 46.1486 62.3089 46.1486 72.9386C46.1486 77.5494 46.6539 82.1251 46.6539 86.694C46.6539 89.5681 47.0599 92.25 47.6645 95.0595C47.8782 96.0525 47.7737 98.2582 48.6751 98.7089M89.0992 38.0728C89.3348 42.7858 90.7591 47.5982 91.2327 52.3335C91.9634 59.6411 92.6363 66.587 92.6363 73.9492C92.6363 77.1648 92.9322 80.5368 92.3836 83.7183C92.188 84.8532 91.6665 86.057 91.6257 87.1993C91.601 87.8895 91.2143 91.7286 90.6151 91.1294M37.0532 74.4545C44.5425 72.8778 52.1941 71.5169 59.7356 70.1594C64.818 69.2446 70.065 69.453 75.063 68.3909C79.4499 67.4587 83.074 66.3697 87.6113 66.3697C91.1823 66.3697 94.7843 65.3591 98.1946 65.3591M137 61C137 69.2315 138.146 77.184 139.049 85.3106C139.424 88.686 140.091 91.985 140.509 95.3324C140.783 97.5244 141.042 100.995 141.042 96.3711M132.05 36.5569C132.05 33.4395 129.455 32.5013 127.277 34.2831C124.481 36.571 130.332 36.2537 131.544 35.041M99 146C81 146.539 99 178.806 99 184M133.356 146C133.356 155.124 128.562 167.827 137 176M181.272 188C181.272 190.015 181.425 192.084 180.991 194.064C180.04 198.412 176.094 201.956 172.963 204.871C167.483 209.973 159.874 214.291 153.088 217.307C143.722 221.47 133.327 223.312 123.668 226.656C116.901 228.998 109.539 229.94 102.417 229.94C96.0401 229.94 87.6369 231.266 81.7279 228.312C77.4579 226.177 73.6053 223.952 68.8427 222.894C66.4685 222.366 64.84 219.256 63.6494 217.307C62.5975 215.586 61.1411 213.966 60 212.254" stroke="black" stroke-width="20" stroke-linecap="round"/>
          </svg>
          `,
      `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M9 35C9 21.7452 19.7452 11 33 11H230C243.255 11 254 21.7452 254 35V232C254 245.255 243.255 256 230 256H33C19.7452 256 9 245.255 9 232V35ZM42.6115 33.61C47.0298 33.61 50.6115 37.1917 50.6115 41.61C50.6115 46.1008 51.3626 50.6076 52.2661 55.9037L52.3083 56.1507C52.6853 58.3599 53.0869 60.7134 53.4185 63.1683C54.5749 62.9594 55.7271 62.7521 56.8735 62.546L58.3183 62.286C61.1233 61.7811 63.9326 61.5705 66.2718 61.3951L66.293 61.3935L66.826 61.3533C69.4322 61.1557 71.4929 60.971 73.4002 60.5657C74.0697 60.4234 74.7796 60.2601 75.5271 60.0882C77.9291 59.5358 80.719 58.8942 83.8012 58.5738C83.6373 56.7964 83.4582 54.9876 83.2724 53.1296C83.0983 51.3892 82.7671 49.6222 82.3595 47.4479C82.3115 47.1918 82.2624 46.9299 82.2124 46.6618C81.769 44.2851 81.2568 41.4258 81.1092 38.4724C80.8885 34.0596 84.2869 30.3035 88.6997 30.0829C93.1124 29.8622 96.8686 33.2606 97.0892 37.6734C97.1772 39.4329 97.495 41.3363 97.9411 43.7279C97.988 43.9795 98.0368 44.2384 98.0868 44.5037L98.087 44.505C98.4789 46.5857 98.9456 49.0637 99.193 51.5376C99.3916 53.5235 99.5893 55.5128 99.7718 57.5146C103.435 58.247 106.195 61.4808 106.195 65.3591C106.195 68.9272 103.859 71.9497 100.633 72.9808C100.635 73.3028 100.636 73.6256 100.636 73.9492C100.636 74.4157 100.651 74.995 100.668 75.6569C100.731 78.1621 100.824 81.85 100.267 85.0777C100.161 85.6958 100.025 86.2412 99.9207 86.6325C99.8677 86.8322 99.8152 87.0211 99.7731 87.1714L99.7471 87.2646L99.7466 87.2662L99.7453 87.2709C99.7135 87.3844 99.6888 87.4726 99.664 87.5637C99.6381 87.6586 99.6197 87.7286 99.606 87.7832C99.5575 88.5912 99.4185 89.902 99.2095 91.0641C99.1121 91.6055 98.8853 92.809 98.3926 93.9763L98.3791 94.0087C98.2219 94.3859 97.4423 96.2565 95.5065 97.6514C94.2327 98.5693 92.1992 99.4493 89.6979 99.1255C87.3454 98.821 85.7721 97.6002 84.9582 96.7863C82.3876 94.2157 81.9321 90.331 83.5917 87.2946C83.6071 87.1532 83.618 87.0392 83.6244 86.9732C83.6291 86.9241 83.6312 86.9015 83.6308 86.9138C83.6869 85.3416 84.0565 83.981 84.2292 83.3484C84.2966 83.1016 84.333 82.9731 84.3619 82.8706L84.3624 82.8692C84.3925 82.7625 84.4148 82.6838 84.4561 82.5283C84.4875 82.4099 84.5002 82.3535 84.5032 82.3404C84.767 80.7973 84.7342 79.4133 84.6857 77.3751C84.6664 76.5624 84.6446 75.6457 84.6382 74.5733C83.1887 74.7712 81.7192 75.1034 79.85 75.5259L79.8493 75.526L79.8458 75.5268C78.9194 75.7362 77.8948 75.9678 76.7259 76.2162C73.6351 76.873 70.5733 77.1151 68.0359 77.3075L67.6797 77.3345L67.6794 77.3345H67.6794C65.1454 77.5262 63.1139 77.68 61.1528 78.033L59.7612 78.2833L59.7603 78.2835C57.9633 78.6067 56.1699 78.9293 54.3816 79.2544L54.3891 79.3917L54.3952 79.501V79.5011V79.5012C54.5179 81.7259 54.6539 84.1931 54.6539 86.6941C54.6539 88.7946 54.9464 90.8712 55.4855 93.3766C55.5833 93.8314 55.6392 94.2374 55.6716 94.4995C55.6895 94.644 55.7052 94.7863 55.7186 94.9142C56.909 97.1282 57.0402 99.8674 55.8305 102.287C53.8546 106.239 49.0492 107.84 45.0974 105.864C42.4319 104.532 41.2597 102.299 40.7941 101.193C40.2976 100.014 40.0991 98.9124 40.006 98.3111C39.9163 97.7312 39.8607 97.15 39.8316 96.8456L39.8316 96.8453L39.8233 96.7589C39.814 96.6633 39.8068 96.5939 39.8016 96.5466C39.152 93.491 38.6539 90.2652 38.6539 86.6941C38.6539 85.2798 38.5993 83.8469 38.5227 82.3185C34.2615 83.1167 30.1224 80.3666 29.2248 76.1026C28.3146 71.7791 31.0816 67.5364 35.4051 66.6262C36.1597 66.4673 36.9157 66.3106 37.6728 66.1559C37.3709 63.7653 36.9518 61.278 36.494 58.5945L36.4441 58.3024C35.5904 53.3004 34.6115 47.5653 34.6115 41.61C34.6115 37.1917 38.1932 33.61 42.6115 33.61ZM55.8178 95.8642L55.8154 95.848C55.8243 95.8946 55.8238 95.9029 55.8178 95.8642ZM83.4344 88.3756C83.431 88.3888 83.4282 88.3998 83.4262 88.4084L83.4243 88.4165C83.4221 88.4258 83.4212 88.4309 83.4213 88.4313C83.4214 88.4315 83.4216 88.4309 83.422 88.4296L83.4231 88.4256L83.4253 88.4167C83.4275 88.4075 83.4305 88.3939 83.4344 88.3756ZM106.996 145.761C107.129 150.177 103.656 153.864 99.2394 153.996L99.2016 153.998L99.1547 153.999C99.1163 154.001 99.0795 154.003 99.0444 154.005C98.8948 155.266 99.0688 157.635 99.9998 161.269C101.002 165.181 102.535 169.325 103.963 173.147L104.057 173.398C104.708 175.141 105.364 176.897 105.856 178.384C106.245 179.557 107 181.849 107 184C107 188.418 103.418 192 99 192C94.7794 192 91.3222 188.732 91.0213 184.588L91.0127 184.555C90.9748 184.413 90.8797 184.055 90.6671 183.412C90.2725 182.22 89.7099 180.714 88.9947 178.8L88.9747 178.747L88.9743 178.746C87.5896 175.04 85.748 170.11 84.5002 165.239C83.3298 160.671 82.2664 154.69 83.6735 149.384C84.4426 146.484 86.0326 143.475 88.9624 141.227C91.8579 139.006 95.3071 138.107 98.7606 138.004C103.177 137.871 106.864 141.344 106.996 145.761ZM98.4011 154.101C98.4009 154.101 98.4072 154.098 98.4208 154.094C98.4081 154.099 98.4014 154.101 98.4011 154.101ZM137 53C141.418 53 145 56.5817 145 61C145 67.2168 145.698 73.1986 146.465 79.7664L146.465 79.7684L146.466 79.7723L146.467 79.778L146.468 79.7875C146.644 81.2996 146.824 82.8428 147 84.4271C147.164 85.9042 147.397 87.4024 147.663 89.0711L147.733 89.5103L147.733 89.5105L147.733 89.5114L147.734 89.5132C147.905 90.5825 148.088 91.7297 148.255 92.9062C148.76 93.9546 149.042 95.1298 149.042 96.3711C149.042 97.4238 149.034 98.4929 148.959 99.2511L148.958 99.2667V99.2668L148.958 99.2673C148.943 99.4215 148.879 100.078 148.662 100.833L148.656 100.854C148.594 101.08 148.178 102.585 146.915 103.993C146.138 104.859 144.456 106.326 141.804 106.61C139.056 106.904 137.003 105.748 135.931 104.885C134.291 103.566 133.64 101.94 133.56 101.74L133.554 101.723C133.354 101.247 133.241 100.849 133.192 100.669C133.087 100.279 133.026 99.9441 132.999 99.7929C132.897 99.2135 132.75 97.9002 132.652 97.0342L132.652 97.0302C132.617 96.7178 132.588 96.464 132.571 96.3247C132.397 94.937 132.176 93.5501 131.928 92.0009L131.863 91.5929C131.598 89.9314 131.309 88.0923 131.098 86.194C130.945 84.8107 130.779 83.4012 130.611 81.969L130.61 81.9635C129.834 75.3438 129 68.2401 129 61C129 56.5817 132.582 53 137 53ZM140.05 36.5569C140.05 32.787 138.312 28.2703 133.678 26.2495C129.28 24.3322 124.939 25.8603 122.212 28.0914C121.52 28.6574 120.314 29.7441 119.471 31.4085C118.468 33.39 117.838 36.6877 119.85 39.8401C121.435 42.3249 123.767 43.1919 124.672 43.4773C125.799 43.833 126.838 43.9358 127.559 43.9672C128.038 43.9881 128.522 43.983 129.001 43.9556C129.941 44.3431 130.97 44.5569 132.05 44.5569C136.468 44.5569 140.05 40.9752 140.05 36.5569ZM133.356 138C137.775 138 141.356 141.582 141.356 146C141.356 148.819 140.995 151.78 140.692 154.26L140.68 154.357C140.352 157.041 140.071 159.351 140.011 161.572C139.893 165.945 140.688 168.435 142.566 170.254C145.74 173.328 145.82 178.392 142.746 181.566C139.672 184.74 134.608 184.82 131.434 181.746C124.874 175.392 123.847 167.444 124.017 161.141C124.098 158.147 124.46 155.179 124.761 152.717L124.798 152.418C125.128 149.714 125.356 147.707 125.356 146C125.356 141.582 128.938 138 133.356 138ZM189.272 188C189.272 183.582 185.691 180 181.272 180C176.854 180 173.272 183.582 173.272 188C173.272 188.848 173.281 189.501 173.287 190.022V190.022C173.303 191.248 173.309 191.747 173.176 192.354C173.088 192.756 172.747 193.567 171.652 194.88C170.595 196.146 169.315 197.338 167.73 198.813L167.511 199.016C162.938 203.275 156.215 207.163 149.839 209.997C145.714 211.83 141.242 213.205 136.323 214.587C135.36 214.858 134.37 215.131 133.362 215.41L133.362 215.41C129.394 216.505 125.138 217.681 121.051 219.096C115.318 221.08 108.877 221.94 102.417 221.94C100.771 221.94 99.0269 222.018 97.4465 222.088L97.4459 222.088L96.9735 222.109C95.1914 222.187 93.5561 222.251 91.98 222.234C88.6871 222.2 86.5991 221.803 85.3056 221.156C84.758 220.883 84.1823 220.587 83.5796 220.277L83.5774 220.276C80.3851 218.635 76.4357 216.605 71.8794 215.401C71.7492 215.215 71.5984 214.985 71.4209 214.7C71.281 214.476 71.14 214.242 70.9815 213.977L70.8985 213.838C70.7684 213.62 70.6183 213.369 70.4756 213.136C69.7067 211.878 68.8443 210.743 68.2117 209.916L68.0097 209.652C67.4097 208.869 67.008 208.344 66.6564 207.817C64.2056 204.141 59.2386 203.147 55.5624 205.598C51.8862 208.049 50.8928 213.016 53.3436 216.692C54.0093 217.691 54.7505 218.656 55.3017 219.374L55.3018 219.374C55.3727 219.467 55.4405 219.555 55.5046 219.639C56.1485 220.48 56.5402 221.016 56.8231 221.479C56.8786 221.57 56.9514 221.692 57.0396 221.841L57.0414 221.844L57.0415 221.844C57.5252 222.659 58.4662 224.243 59.5077 225.571C60.6798 227.065 63.1409 229.822 67.1073 230.703C70.0539 231.358 72.4138 232.558 75.9095 234.335C76.6067 234.689 77.349 235.067 78.1502 235.467C82.7657 237.775 87.8338 238.192 91.814 238.233C93.8746 238.255 95.9051 238.171 97.6768 238.093L98.0917 238.075L98.0926 238.075C99.7584 238.001 101.146 237.94 102.417 237.94C110.201 237.94 118.485 236.915 126.285 234.215C129.842 232.984 133.461 231.984 137.366 230.904C138.438 230.608 139.532 230.305 140.652 229.99C145.687 228.575 151.095 226.948 156.337 224.618C163.532 221.42 172.028 216.672 178.414 210.727C178.531 210.618 178.653 210.504 178.779 210.387L178.78 210.387C180.212 209.057 182.202 207.21 183.937 205.13C185.836 202.855 187.943 199.72 188.807 195.773C189.378 193.161 189.316 190.265 189.283 188.712L189.283 188.71C189.277 188.424 189.272 188.184 189.272 188Z" fill="black"/>
          </svg>
          `,
      `<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path opacity="0.2" d="M205 139C205 154.229 200.484 169.116 192.023 181.779C183.562 194.441 171.537 204.311 157.467 210.139C143.397 215.967 127.915 217.491 112.978 214.52C98.0415 211.549 84.3214 204.216 73.5528 193.447C62.7842 182.679 55.4506 168.958 52.4796 154.022C49.5085 139.085 51.0334 123.603 56.8613 109.533C62.6893 95.4635 72.5585 83.4377 85.2211 74.9768C97.8837 66.516 112.771 62 128 62C148.422 62 168.007 70.1125 182.447 84.5528C196.888 98.9931 205 118.578 205 139Z" fill="black"/>
        <path d="M224 112H200C197.878 112 195.843 112.843 194.343 114.343C192.843 115.843 192 117.878 192 120C192 122.122 192.843 124.157 194.343 125.657C195.843 127.157 197.878 128 200 128H215.64C213.74 148.479 204.739 167.649 190.195 182.191C175.651 196.734 156.479 205.732 136 207.63V95C143.541 93.0528 150.114 88.4221 154.485 81.9759C158.856 75.5297 202.521 71.7265 201.539 64C200.558 56.2735 154.998 45.1541 149.154 40.0054C143.31 34.8567 135.789 32.0161 128 32.0161C120.211 32.0161 112.69 34.8567 106.846 40.0054C101.002 45.1541 41.3414 53.152 40.36 60.8785C39.3786 68.605 97.1439 75.5297 101.515 81.9759C105.886 88.4221 112.459 93.0528 120 95V207.63C99.5207 205.732 80.3495 196.734 65.8054 182.191C51.2614 167.649 42.2602 148.479 40.36 128H56C58.1217 128 60.1566 127.157 61.6569 125.657C63.1571 124.157 64 122.122 64 120C64 117.878 63.1571 115.843 61.6569 114.343C60.1566 112.843 58.1217 112 56 112H32C29.8783 112 27.8434 112.843 26.3431 114.343C24.8429 115.843 24 117.878 24 120C24 147.583 34.9571 174.035 54.4609 193.539C73.9647 213.043 100.417 224 128 224C155.583 224 182.035 213.043 201.539 193.539C221.043 174.035 232 147.583 232 120C232 117.878 231.157 115.843 229.657 114.343C228.157 112.843 226.122 112 224 112ZM112 64C112 60.8355 112.938 57.742 114.696 55.1109C116.455 52.4797 118.953 50.4289 121.877 49.2179C124.801 48.0069 128.018 47.6901 131.121 48.3074C134.225 48.9248 137.076 50.4486 139.314 52.6863C141.551 54.9239 143.075 57.7748 143.693 60.8785C144.31 63.9822 143.993 67.1993 142.782 70.1229C141.571 73.0465 139.52 75.5454 136.889 77.3035C134.258 79.0616 131.165 80 128 80C123.757 80 119.687 78.3143 116.686 75.3137C113.686 72.3131 112 68.2434 112 64Z" fill="black"/>
        </svg>
        `,
    ],
  };
}

This will emit a single component file to /out/HelloIcon.tsx:

import { forwardRef, ReactElement } from "react";
import { Icon, IconBase, IconWeight } from "@phosphor-icons/react";

const weights = new Map<IconWeight, ReactElement>([
  [
    "regular",
    <path d="M224.355 112.856H200.355C198.233 112.856 196.198 113.699 194.698 115.199C193.198 116.699 192.355 118.734 192.355 120.856C192.355 122.978 193.198 125.013 194.698 126.513C196.198 128.013 198.233 128.856 200.355 128.856L162.5 144.5C160.6 164.979 205.094 168.505 190.55 183.047C176.006 197.59 173.479 175.602 153 177.5L136.355 95.856C143.896 93.9089 190.327 102.302 194.698 95.856C199.069 89.4098 161.081 68.5665 160.1 60.84C159.119 53.1135 155.353 46.0101 149.509 40.8614C143.665 35.7127 136.144 32.8721 128.355 32.8721C120.566 32.8721 113.045 35.7127 107.201 40.8614C101.357 46.0101 97.5915 53.1135 96.6101 60.84C95.6287 68.5665 51.9838 89.4098 56.3551 95.856C60.7264 102.302 112.814 93.9089 120.355 95.856L107.201 177.5C86.7219 175.602 80.7045 197.59 66.1605 183.047C51.6165 168.505 98.5103 161.979 96.6101 141.5L56.3551 128.856C58.4768 128.856 60.5116 128.013 62.0119 126.513C63.5122 125.013 64.3551 122.978 64.3551 120.856C64.3551 118.734 63.5122 116.699 62.0119 115.199C60.5116 113.699 58.4768 112.856 56.3551 112.856H32.3551C30.2333 112.856 28.1985 113.699 26.6982 115.199C25.1979 116.699 24.3551 118.734 24.3551 120.856C24.3551 148.439 35.3122 174.891 54.816 194.395C74.3197 213.899 100.773 224.856 128.355 224.856C155.938 224.856 182.39 213.899 201.894 194.395C221.398 174.891 232.355 148.439 232.355 120.856C232.355 118.734 231.512 116.699 230.012 115.199C228.512 113.699 226.477 112.856 224.355 112.856ZM112.355 64.856C112.355 61.6915 113.293 58.5981 115.052 55.9669C116.81 53.3357 119.309 51.2849 122.232 50.0739C125.156 48.8629 128.373 48.5461 131.477 49.1634C134.58 49.7808 137.431 51.3046 139.669 53.5423C141.906 55.7799 143.43 58.6309 144.048 61.7346C144.665 64.8383 144.348 68.0553 143.137 70.9789C141.926 73.9025 139.875 76.4014 137.244 78.1595C134.613 79.9176 131.52 80.856 128.355 80.856C124.112 80.856 120.042 79.1703 117.041 76.1697C114.041 73.1691 112.355 69.0995 112.355 64.856Z" />,
  ],
  [
    "thin",
    <path d="M224 116H200C198.939 116 197.922 116.421 197.172 117.172C196.421 117.922 196 118.939 196 120C196 121.061 196.421 122.078 197.172 122.828C197.922 123.579 198.939 124 200 124H219.91C218.879 146.984 209.286 168.75 193.018 185.018C176.75 201.286 154.984 210.879 132 211.91V91.71C139.006 90.6987 145.37 87.0712 149.809 81.5574C154.249 76.0436 156.435 69.0528 155.928 61.992C155.421 54.9313 152.259 48.3245 147.077 43.5015C141.895 38.6785 135.079 35.9972 128 35.9972C120.921 35.9972 114.105 38.6785 108.923 43.5015C103.741 48.3245 100.579 54.9313 100.072 61.992C99.5649 69.0528 101.751 76.0436 106.191 81.5574C110.63 87.0712 116.994 90.6987 124 91.71V211.91C101.016 210.879 79.25 201.286 62.9817 185.018C46.7135 168.75 37.1207 146.984 36.09 124H56C57.0609 124 58.0783 123.579 58.8284 122.828C59.5786 122.078 60 121.061 60 120C60 118.939 59.5786 117.922 58.8284 117.172C58.0783 116.421 57.0609 116 56 116H32C30.9391 116 29.9217 116.421 29.1716 117.172C28.4214 117.922 28 118.939 28 120C28 146.522 24.7464 193.156 43.5 211.91C62.2536 230.664 101.478 220 128 220C154.522 220 201.156 230.664 219.91 211.91C238.664 193.156 228 146.522 228 120C228 118.939 227.579 117.922 226.828 117.172C226.078 116.421 225.061 116 224 116ZM108 64C108 60.0444 109.173 56.1776 111.371 52.8886C113.568 49.5996 116.692 47.0362 120.346 45.5224C124.001 44.0087 128.022 43.6126 131.902 44.3843C135.781 45.156 139.345 47.0608 142.142 49.8579C144.939 52.6549 146.844 56.2186 147.616 60.0982C148.387 63.9778 147.991 67.9992 146.478 71.6537C144.964 75.3082 142.4 78.4318 139.111 80.6294C135.822 82.827 131.956 84 128 84C122.696 84 117.609 81.8929 113.858 78.1421C110.107 74.3914 108 69.3043 108 64Z" />,
  ],
  [
    "light",
    <path d="M42.6115 41.6099C42.6115 52.1723 46.1486 62.3089 46.1486 72.9386C46.1486 77.5494 46.6539 82.1251 46.6539 86.694C46.6539 89.5681 47.0599 92.25 47.6645 95.0595C47.8782 96.0525 47.7737 98.2582 48.6751 98.7089M89.0992 38.0728C89.3348 42.7858 90.7591 47.5982 91.2327 52.3335C91.9634 59.6411 92.6363 66.587 92.6363 73.9492C92.6363 77.1648 92.9322 80.5368 92.3837 83.7183C92.188 84.8532 91.6665 86.057 91.6257 87.1993C91.601 87.8895 91.2143 91.7286 90.6151 91.1294M37.0532 74.4545C44.5425 72.8778 52.1942 71.5169 59.7356 70.1594C64.8181 69.2446 70.065 69.453 75.0631 68.3909C79.45 67.4587 83.074 66.3697 87.6114 66.3697C91.1823 66.3697 94.7843 65.3591 98.1946 65.3591M137 61C137 69.2315 138.146 77.184 139.049 85.3106C139.424 88.686 140.091 91.985 140.509 95.3324C140.783 97.5244 141.042 100.995 141.042 96.3711M132.05 36.5569C132.05 33.4395 129.455 32.5013 127.277 34.2831C124.481 36.571 130.332 36.2537 131.544 35.041M99 146C81 146.539 99 178.806 99 184M133.356 146C133.356 155.124 128.562 167.827 137 176M181.272 188C181.272 190.015 181.425 192.084 180.992 194.064C180.04 198.412 176.094 201.956 172.963 204.871C167.483 209.973 159.874 214.291 153.088 217.307C143.722 221.47 133.327 223.312 123.668 226.656C116.901 228.998 109.539 229.94 102.417 229.94C96.0402 229.94 87.6369 231.266 81.728 228.312C77.4579 226.177 73.6053 223.952 68.8428 222.894C66.4685 222.366 64.84 219.256 63.6494 217.307C62.5976 215.586 61.1411 213.966 60 212.254" />,
  ],
  [
    "bold",
    <path d="M42.6115 41.6099C42.6115 52.1723 46.1486 62.3089 46.1486 72.9386C46.1486 77.5494 46.6539 82.1251 46.6539 86.694C46.6539 89.5681 47.0599 92.25 47.6645 95.0595C47.8782 96.0525 47.7737 98.2582 48.6751 98.7089M89.0992 38.0728C89.3348 42.7858 90.7591 47.5982 91.2327 52.3335C91.9634 59.6411 92.6363 66.587 92.6363 73.9492C92.6363 77.1648 92.9322 80.5368 92.3836 83.7183C92.188 84.8532 91.6665 86.057 91.6257 87.1993C91.601 87.8895 91.2143 91.7286 90.6151 91.1294M37.0532 74.4545C44.5425 72.8778 52.1941 71.5169 59.7356 70.1594C64.818 69.2446 70.065 69.453 75.063 68.3909C79.4499 67.4587 83.074 66.3697 87.6113 66.3697C91.1823 66.3697 94.7843 65.3591 98.1946 65.3591M137 61C137 69.2315 138.146 77.184 139.049 85.3106C139.424 88.686 140.091 91.985 140.509 95.3324C140.783 97.5244 141.042 100.995 141.042 96.3711M132.05 36.5569C132.05 33.4395 129.455 32.5013 127.277 34.2831C124.481 36.571 130.332 36.2537 131.544 35.041M99 146C81 146.539 99 178.806 99 184M133.356 146C133.356 155.124 128.562 167.827 137 176M181.272 188C181.272 190.015 181.425 192.084 180.991 194.064C180.04 198.412 176.094 201.956 172.963 204.871C167.483 209.973 159.874 214.291 153.088 217.307C143.722 221.47 133.327 223.312 123.668 226.656C116.901 228.998 109.539 229.94 102.417 229.94C96.0401 229.94 87.6369 231.266 81.7279 228.312C77.4579 226.177 73.6053 223.952 68.8427 222.894C66.4685 222.366 64.84 219.256 63.6494 217.307C62.5975 215.586 61.1411 213.966 60 212.254" />,
  ],
  [
    "fill",
    <path d="M9 35C9 21.7452 19.7452 11 33 11H230C243.255 11 254 21.7452 254 35V232C254 245.255 243.255 256 230 256H33C19.7452 256 9 245.255 9 232V35ZM42.6115 33.61C47.0298 33.61 50.6115 37.1917 50.6115 41.61C50.6115 46.1008 51.3626 50.6076 52.2661 55.9037L52.3083 56.1507C52.6853 58.3599 53.0869 60.7134 53.4185 63.1683C54.5749 62.9594 55.7271 62.7521 56.8735 62.546L58.3183 62.286C61.1233 61.7811 63.9326 61.5705 66.2718 61.3951L66.293 61.3935L66.826 61.3533C69.4322 61.1557 71.4929 60.971 73.4002 60.5657C74.0697 60.4234 74.7796 60.2601 75.5271 60.0882C77.9291 59.5358 80.719 58.8942 83.8012 58.5738C83.6373 56.7964 83.4582 54.9876 83.2724 53.1296C83.0983 51.3892 82.7671 49.6222 82.3595 47.4479C82.3115 47.1918 82.2624 46.9299 82.2124 46.6618C81.769 44.2851 81.2568 41.4258 81.1092 38.4724C80.8885 34.0596 84.2869 30.3035 88.6997 30.0829C93.1124 29.8622 96.8686 33.2606 97.0892 37.6734C97.1772 39.4329 97.495 41.3363 97.9411 43.7279C97.988 43.9795 98.0368 44.2384 98.0868 44.5037L98.087 44.505C98.4789 46.5857 98.9456 49.0637 99.193 51.5376C99.3916 53.5235 99.5893 55.5128 99.7718 57.5146C103.435 58.247 106.195 61.4808 106.195 65.3591C106.195 68.9272 103.859 71.9497 100.633 72.9808C100.635 73.3028 100.636 73.6256 100.636 73.9492C100.636 74.4157 100.651 74.995 100.668 75.6569C100.731 78.1621 100.824 81.85 100.267 85.0777C100.161 85.6958 100.025 86.2412 99.9207 86.6325C99.8677 86.8322 99.8152 87.0211 99.7731 87.1714L99.7471 87.2646L99.7466 87.2662L99.7453 87.2709C99.7135 87.3844 99.6888 87.4726 99.664 87.5637C99.6381 87.6586 99.6197 87.7286 99.606 87.7832C99.5575 88.5912 99.4185 89.902 99.2095 91.0641C99.1121 91.6055 98.8853 92.809 98.3926 93.9763L98.3791 94.0087C98.2219 94.3859 97.4423 96.2565 95.5065 97.6514C94.2327 98.5693 92.1992 99.4493 89.6979 99.1255C87.3454 98.821 85.7721 97.6002 84.9582 96.7863C82.3876 94.2157 81.9321 90.331 83.5917 87.2946C83.6071 87.1532 83.618 87.0392 83.6244 86.9732C83.6291 86.9241 83.6312 86.9015 83.6308 86.9138C83.6869 85.3416 84.0565 83.981 84.2292 83.3484C84.2966 83.1016 84.333 82.9731 84.3619 82.8706L84.3624 82.8692C84.3925 82.7625 84.4148 82.6838 84.4561 82.5283C84.4875 82.4099 84.5002 82.3535 84.5032 82.3404C84.767 80.7973 84.7342 79.4133 84.6857 77.3751C84.6664 76.5624 84.6446 75.6457 84.6382 74.5733C83.1887 74.7712 81.7192 75.1034 79.85 75.5259L79.8493 75.526L79.8458 75.5268C78.9194 75.7362 77.8948 75.9678 76.7259 76.2162C73.6351 76.873 70.5733 77.1151 68.0359 77.3075L67.6797 77.3345L67.6794 77.3345H67.6794C65.1454 77.5262 63.1139 77.68 61.1528 78.033L59.7612 78.2833L59.7603 78.2835C57.9633 78.6067 56.1699 78.9293 54.3816 79.2544L54.3891 79.3917L54.3952 79.501V79.5011V79.5012C54.5179 81.7259 54.6539 84.1931 54.6539 86.6941C54.6539 88.7946 54.9464 90.8712 55.4855 93.3766C55.5833 93.8314 55.6392 94.2374 55.6716 94.4995C55.6895 94.644 55.7052 94.7863 55.7186 94.9142C56.909 97.1282 57.0402 99.8674 55.8305 102.287C53.8546 106.239 49.0492 107.84 45.0974 105.864C42.4319 104.532 41.2597 102.299 40.7941 101.193C40.2976 100.014 40.0991 98.9124 40.006 98.3111C39.9163 97.7312 39.8607 97.15 39.8316 96.8456L39.8316 96.8453L39.8233 96.7589C39.814 96.6633 39.8068 96.5939 39.8016 96.5466C39.152 93.491 38.6539 90.2652 38.6539 86.6941C38.6539 85.2798 38.5993 83.8469 38.5227 82.3185C34.2615 83.1167 30.1224 80.3666 29.2248 76.1026C28.3146 71.7791 31.0816 67.5364 35.4051 66.6262C36.1597 66.4673 36.9157 66.3106 37.6728 66.1559C37.3709 63.7653 36.9518 61.278 36.494 58.5945L36.4441 58.3024C35.5904 53.3004 34.6115 47.5653 34.6115 41.61C34.6115 37.1917 38.1932 33.61 42.6115 33.61ZM55.8178 95.8642L55.8154 95.848C55.8243 95.8946 55.8238 95.9029 55.8178 95.8642ZM83.4344 88.3756C83.431 88.3888 83.4282 88.3998 83.4262 88.4084L83.4243 88.4165C83.4221 88.4258 83.4212 88.4309 83.4213 88.4313C83.4214 88.4315 83.4216 88.4309 83.422 88.4296L83.4231 88.4256L83.4253 88.4167C83.4275 88.4075 83.4305 88.3939 83.4344 88.3756ZM106.996 145.761C107.129 150.177 103.656 153.864 99.2394 153.996L99.2016 153.998L99.1547 153.999C99.1163 154.001 99.0795 154.003 99.0444 154.005C98.8948 155.266 99.0688 157.635 99.9998 161.269C101.002 165.181 102.535 169.325 103.963 173.147L104.057 173.398C104.708 175.141 105.364 176.897 105.856 178.384C106.245 179.557 107 181.849 107 184C107 188.418 103.418 192 99 192C94.7794 192 91.3222 188.732 91.0213 184.588L91.0127 184.555C90.9748 184.413 90.8797 184.055 90.6671 183.412C90.2725 182.22 89.7099 180.714 88.9947 178.8L88.9747 178.747L88.9743 178.746C87.5896 175.04 85.748 170.11 84.5002 165.239C83.3298 160.671 82.2664 154.69 83.6735 149.384C84.4426 146.484 86.0326 143.475 88.9624 141.227C91.8579 139.006 95.3071 138.107 98.7606 138.004C103.177 137.871 106.864 141.344 106.996 145.761ZM98.4011 154.101C98.4009 154.101 98.4072 154.098 98.4208 154.094C98.4081 154.099 98.4014 154.101 98.4011 154.101ZM137 53C141.418 53 145 56.5817 145 61C145 67.2168 145.698 73.1986 146.465 79.7664L146.465 79.7684L146.466 79.7723L146.467 79.778L146.468 79.7875C146.644 81.2996 146.824 82.8428 147 84.4271C147.164 85.9042 147.397 87.4024 147.663 89.0711L147.733 89.5103L147.733 89.5105L147.733 89.5114L147.734 89.5132C147.905 90.5825 148.088 91.7297 148.255 92.9062C148.76 93.9546 149.042 95.1298 149.042 96.3711C149.042 97.4238 149.034 98.4929 148.959 99.2511L148.958 99.2667V99.2668L148.958 99.2673C148.943 99.4215 148.879 100.078 148.662 100.833L148.656 100.854C148.594 101.08 148.178 102.585 146.915 103.993C146.138 104.859 144.456 106.326 141.804 106.61C139.056 106.904 137.003 105.748 135.931 104.885C134.291 103.566 133.64 101.94 133.56 101.74L133.554 101.723C133.354 101.247 133.241 100.849 133.192 100.669C133.087 100.279 133.026 99.9441 132.999 99.7929C132.897 99.2135 132.75 97.9002 132.652 97.0342L132.652 97.0302C132.617 96.7178 132.588 96.464 132.571 96.3247C132.397 94.937 132.176 93.5501 131.928 92.0009L131.863 91.5929C131.598 89.9314 131.309 88.0923 131.098 86.194C130.945 84.8107 130.779 83.4012 130.611 81.969L130.61 81.9635C129.834 75.3438 129 68.2401 129 61C129 56.5817 132.582 53 137 53ZM140.05 36.5569C140.05 32.787 138.312 28.2703 133.678 26.2495C129.28 24.3322 124.939 25.8603 122.212 28.0914C121.52 28.6574 120.314 29.7441 119.471 31.4085C118.468 33.39 117.838 36.6877 119.85 39.8401C121.435 42.3249 123.767 43.1919 124.672 43.4773C125.799 43.833 126.838 43.9358 127.559 43.9672C128.038 43.9881 128.522 43.983 129.001 43.9556C129.941 44.3431 130.97 44.5569 132.05 44.5569C136.468 44.5569 140.05 40.9752 140.05 36.5569ZM133.356 138C137.775 138 141.356 141.582 141.356 146C141.356 148.819 140.995 151.78 140.692 154.26L140.68 154.357C140.352 157.041 140.071 159.351 140.011 161.572C139.893 165.945 140.688 168.435 142.566 170.254C145.74 173.328 145.82 178.392 142.746 181.566C139.672 184.74 134.608 184.82 131.434 181.746C124.874 175.392 123.847 167.444 124.017 161.141C124.098 158.147 124.46 155.179 124.761 152.717L124.798 152.418C125.128 149.714 125.356 147.707 125.356 146C125.356 141.582 128.938 138 133.356 138ZM189.272 188C189.272 183.582 185.691 180 181.272 180C176.854 180 173.272 183.582 173.272 188C173.272 188.848 173.281 189.501 173.287 190.022V190.022C173.303 191.248 173.309 191.747 173.176 192.354C173.088 192.756 172.747 193.567 171.652 194.88C170.595 196.146 169.315 197.338 167.73 198.813L167.511 199.016C162.938 203.275 156.215 207.163 149.839 209.997C145.714 211.83 141.242 213.205 136.323 214.587C135.36 214.858 134.37 215.131 133.362 215.41L133.362 215.41C129.394 216.505 125.138 217.681 121.051 219.096C115.318 221.08 108.877 221.94 102.417 221.94C100.771 221.94 99.0269 222.018 97.4465 222.088L97.4459 222.088L96.9735 222.109C95.1914 222.187 93.5561 222.251 91.98 222.234C88.6871 222.2 86.5991 221.803 85.3056 221.156C84.758 220.883 84.1823 220.587 83.5796 220.277L83.5774 220.276C80.3851 218.635 76.4357 216.605 71.8794 215.401C71.7492 215.215 71.5984 214.985 71.4209 214.7C71.281 214.476 71.14 214.242 70.9815 213.977L70.8985 213.838C70.7684 213.62 70.6183 213.369 70.4756 213.136C69.7067 211.878 68.8443 210.743 68.2117 209.916L68.0097 209.652C67.4097 208.869 67.008 208.344 66.6564 207.817C64.2056 204.141 59.2386 203.147 55.5624 205.598C51.8862 208.049 50.8928 213.016 53.3436 216.692C54.0093 217.691 54.7505 218.656 55.3017 219.374L55.3018 219.374C55.3727 219.467 55.4405 219.555 55.5046 219.639C56.1485 220.48 56.5402 221.016 56.8231 221.479C56.8786 221.57 56.9514 221.692 57.0396 221.841L57.0414 221.844L57.0415 221.844C57.5252 222.659 58.4662 224.243 59.5077 225.571C60.6798 227.065 63.1409 229.822 67.1073 230.703C70.0539 231.358 72.4138 232.558 75.9095 234.335C76.6067 234.689 77.349 235.067 78.1502 235.467C82.7657 237.775 87.8338 238.192 91.814 238.233C93.8746 238.255 95.9051 238.171 97.6768 238.093L98.0917 238.075L98.0926 238.075C99.7584 238.001 101.146 237.94 102.417 237.94C110.201 237.94 118.485 236.915 126.285 234.215C129.842 232.984 133.461 231.984 137.366 230.904C138.438 230.608 139.532 230.305 140.652 229.99C145.687 228.575 151.095 226.948 156.337 224.618C163.532 221.42 172.028 216.672 178.414 210.727C178.531 210.618 178.653 210.504 178.779 210.387L178.78 210.387C180.212 209.057 182.202 207.21 183.937 205.13C185.836 202.855 187.943 199.72 188.807 195.773C189.378 193.161 189.316 190.265 189.283 188.712L189.283 188.71C189.277 188.424 189.272 188.184 189.272 188Z" />,
  ],
  [
    "duotone",
    <>
      <path
        d="M205 139C205 154.229 200.484 169.116 192.023 181.779C183.562 194.441 171.537 204.311 157.467 210.139C143.397 215.967 127.915 217.491 112.978 214.52C98.0415 211.549 84.3214 204.216 73.5528 193.447C62.7842 182.679 55.4506 168.958 52.4796 154.022C49.5085 139.085 51.0334 123.603 56.8613 109.533C62.6893 95.4635 72.5585 83.4377 85.2211 74.9768C97.8837 66.516 112.771 62 128 62C148.422 62 168.007 70.1125 182.447 84.5528C196.888 98.9931 205 118.578 205 139Z"
        opacity="0.2"
      />
      <path d="M224 112H200C197.878 112 195.843 112.843 194.343 114.343C192.843 115.843 192 117.878 192 120C192 122.122 192.843 124.157 194.343 125.657C195.843 127.157 197.878 128 200 128H215.64C213.74 148.479 204.739 167.649 190.195 182.191C175.651 196.734 156.479 205.732 136 207.63V95C143.541 93.0528 150.114 88.4221 154.485 81.9759C158.856 75.5297 202.521 71.7265 201.539 64C200.558 56.2735 154.998 45.1541 149.154 40.0054C143.31 34.8567 135.789 32.0161 128 32.0161C120.211 32.0161 112.69 34.8567 106.846 40.0054C101.002 45.1541 41.3414 53.152 40.36 60.8785C39.3786 68.605 97.1439 75.5297 101.515 81.9759C105.886 88.4221 112.459 93.0528 120 95V207.63C99.5207 205.732 80.3495 196.734 65.8054 182.191C51.2614 167.649 42.2602 148.479 40.36 128H56C58.1217 128 60.1566 127.157 61.6569 125.657C63.1571 124.157 64 122.122 64 120C64 117.878 63.1571 115.843 61.6569 114.343C60.1566 112.843 58.1217 112 56 112H32C29.8783 112 27.8434 112.843 26.3431 114.343C24.8429 115.843 24 117.878 24 120C24 147.583 34.9571 174.035 54.4609 193.539C73.9647 213.043 100.417 224 128 224C155.583 224 182.035 213.043 201.539 193.539C221.043 174.035 232 147.583 232 120C232 117.878 231.157 115.843 229.657 114.343C228.157 112.843 226.122 112 224 112ZM112 64C112 60.8355 112.938 57.742 114.696 55.1109C116.455 52.4797 118.953 50.4289 121.877 49.2179C124.801 48.0069 128.018 47.6901 131.121 48.3074C134.225 48.9248 137.076 50.4486 139.314 52.6863C141.551 54.9239 143.075 57.7748 143.693 60.8785C144.31 63.9822 143.993 67.1993 142.782 70.1229C141.571 73.0465 139.52 75.5454 136.889 77.3035C134.258 79.0616 131.165 80 128 80C123.757 80 119.687 78.3143 116.686 75.3137C113.686 72.3131 112 68.2434 112 64Z" />
    </>,
  ],
]);

const HelloIcon: Icon = forwardRef((props, ref) => (
  <IconBase ref={ref} {...props} weights={weights} />
));

HelloIcon.displayName = "HelloIcon";

export default HelloIcon;

1 reply

rektdeckard Sep 18, 2023
Maintainer

Or this may be possible with SVGR's custom transformations

rektdeckard · 2023-09-18T22:10:30Z

rektdeckard
Sep 18, 2023
Maintainer

If you would rather keep your SVGR workflow and are OK with doing some runtime stuff, you could write a custom wrapper that "merges" your 6 generated icons per weight into a single component:

import { forwardRef, ForwardRefExoticComponent } from 'react';
import { Icon, IconProps, IconWeight } from '@phosphor-icons/react';

type CustomWrapperWeights = {
  [weight in IconWeight]?: ForwardRefExoticComponent<any>;
};

export function createCustomWrapper(weights: CustomWrapperWeights): Icon {
  return forwardRef((props: IconProps, ref) => {
    const {
      size = '1em',
      color,
      weight = 'regular',
      mirrored,
      ...rest
    } = props;

    const Component = weights[weight];
    if (!Component) return null;

    return (
      <Component
        ref={ref}
        width={size}
        height={size}
        fill={color}
        transform={mirrored ? 'scale(-1, 1)' : undefined}
        {...rest}
      />
    );
  });
}

... then set up each merged component like so:

import { createCustomWrapper } from './utils';
import { SVGAlien, SVGAlienThin, SVGAlienLight, SVGAlienBold, SVGAlienFill, SVGAlienDuotone }   from './generated-from-svgo';

const Alien = createCustomWrapper({
  regular: SVGAlien,
  thin: SVGAlienThin,
  light: SVGAlienLight,
  bold: SVGAlienBold,
  fill: SVGAlienFill,
  duotone: SVGAlienDuotone,
});

Note that I used the --ref flag with @svgo/cli so that the generated components would be ForwardRefs too, just like regular phosphor icons.

1 reply

rektdeckard Sep 18, 2023
Maintainer

Live example showing both methods: https://stackblitz.com/edit/stackblitz-starters-r5ttmg?file=src%2FApp.tsx

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Building custom phosphor icons from the Figma API #66

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Building custom phosphor icons from the Figma API #66

kfayelun Sep 18, 2023

Replies: 2 comments · 2 replies

rektdeckard Sep 18, 2023 Maintainer

rektdeckard Sep 18, 2023 Maintainer

rektdeckard Sep 18, 2023 Maintainer

rektdeckard Sep 18, 2023 Maintainer

kfayelun
Sep 18, 2023

Replies: 2 comments 2 replies

rektdeckard
Sep 18, 2023
Maintainer

rektdeckard Sep 18, 2023
Maintainer

rektdeckard
Sep 18, 2023
Maintainer

rektdeckard Sep 18, 2023
Maintainer