iconify / tools Goto Github PK

Feature request:

Figma images query and download concurrrently

• Use p-limit to implement, allow user to set concurrency limit
• Use axios to replace fetch, axios support more advanced features, like timout, system proxy etc.

Polish query and download print log

• Print loading log with ora
• Print stat log after import task end, specially highlight icons which download error (It's hard to see how many icons download error for now).

Above is what I want to enhance figma download flow at present, I can create a PR for it if the request is allowd. If more features needed, please let me known.

Hi there,

I'm trying to import the FontAwesome Duotone icons where I'm replacing the classes. I'm using your conversion script (link) but I've added the following then():

}).then(() => {

        // Replace duotone classes
        if (prefix === 'fad') {
            return collection.promiseEach(svg => {
                let string = svg.toString();
                string = string.replace('fa-primary', 'icon-primary').replace(/fa-secondary/g, 'icon-secondary');
                console.log(string);
                svg = new tools.SVG(string);
                return svg;
            });
        }

    }).then(() => {

However, I'm getting the following error:

TypeError: func.then is not a function
    at next (/srv/www/m/mediasoep.nl/vhosts/iconify/htdocs/node_modules/@iconify/tools/src/collection.js:352:22)
    at /srv/www/m/mediasoep.nl/vhosts/iconify/htdocs/node_modules/@iconify/tools/src/collection.js:377:13
    at new Promise (<anonymous>)
    at Collection.promiseEach (/srv/www/m/mediasoep.nl/vhosts/iconify/htdocs/node_modules/@iconify/tools/src/collection.js:326:16)

When I change the return line to return tools.SVGO(svg);, it works correctly. But I don't want to use any tool from the tools to fix this. What do I return instead?

We are seeing vulnerabilities in 1.3.18 for SVGO and that is the last published version with ImportFont which we are currently utilizing. See CVE-2021-33587 for more info.

In the move from 1.x to 2.x it appears the ImportFont functionality (as referenced in the 1.x docs here was removed.

Is there an alternative way to import fonts in 2.x or is this support being dropped?

I don't see a way to add more SVGO plugins or override the defined plugins in the plugins[] array. How do I do that?

I want to define more SVGO plugins like removeAttrs: {attrs: '(class)'} to remove classes and optimise the way I'd like. How do I go about doing that, please?

Hi. When using cheerio and iconify i get this. I am using github actions, and the way I think it works it does pnpm install and astro check. If I do that on local / github action I get this issue that I provided. Althout I can fix it if i rewrite the import import * as cheerio from 'cheerio'; it works.

Error when evaluating SSR module /Users/martinlejko/Repos/github.com/martinlejko/martinlejko.github.io/astro.config.ts: failed to import "astro-icon" |- file:///Users/martinlejko/Repos/github.com/martinlejko/martinlejko.github.io/node_modules/.pnpm/@[email protected]/node_modules/@iconify/tools/lib/svg/index.mjs:1 import cheerio from 'cheerio'; ^^^^^^^ SyntaxError: The requested module 'cheerio' does not provide an export named 'default' at ModuleJob._instantiate (node:internal/modules/esm/module_job:171:21) at async ModuleJob.run (node:internal/modules/esm/module_job:254:5) at async ModuleLoader.import (node:internal/modules/esm/loader:474:24) at async nodeImport (file:///Users/martinlejko/Repos/github.com/martinlejko/martinlejko.github.io/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:52928:15) at async ssrImport (file:///Users/martinlejko/Repos/github.com/martinlejko/martinlejko.github.io/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:52786:16) at async eval (/Users/martinlejko/Repos/github.com/martinlejko/martinlejko.github.io/astro.config.ts:9:31) at async instantiateModule (file:///Users/martinlejko/Repos/github.com/martinlejko/martinlejko.github.io/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-NjL7WTE1.js:52844:5)

Is there a way that we change the import line into the compatible one?

👋

Is there anyway to get the absolute path of each file when running the forEach() on a collection instance? For example, when running the following, I only get the svg, and name.

return collection.forEach((svg, name) => {
  console.log(
    `Found icon ${name}: ${svg.toString()}\n`
  );
});

I need to have the path of each file for the project I am working on and couldn't find anywhere in the code where I can find the path.

I really appreciate any help on this 😀

The title tag is being stripped out during the importDirectory call. This prevents someone from being able to disable the plugin removeTitle during the runSVGO call to keep the title tag.

Could you add a example about how use in Node env

I use vite-plugin-dynamic-import in my Vue+Vite project. and also, the @iconify-vue is used. During the build of project, the following error appears:

'promises' is not exported by __vite-browser-external, imported by node_modules/@iconify/tools/lib/misc/scan.mjs

apparently , the @iconify/tool is not compatible with the plugin.

How can handle this issue?

My_File_Name.svg becomes my-file-name.svg

Is there an option to not change file names?

What's the recommended way, after exporting a directory of icons to an iconify JSON file, to import that JSON file into your app for use? I would think to do Iconify.addCollection(myCollectionFile); but there's no easy way to import JSON files.

Should the tools export as a javascript file instead for easy module import?

This might be out of scope but Many icons have duplicate arcs. Look at this path:

M12 19.2c-2.5 0-4.71-1.28-6-3.2.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.232 7.232 0 01-6 3.2M12 5a3 3 0 013 3 3 3 0 01-3 3 3 3 0 01-3-3 3 3 0 013-3m0-3A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10c0-5.53-4.5-10-10-10Z

In theory, automatic optimizations could convert it to:

M12 19.2c-2.5 0-4.71-1.28-6-3.2.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.232 7.232 0 01-6 3.2M12 5a3 3 0 010 6 3 3 0 010-6m0-3a10 10 0 000 20 10 10 0 0010-10c0-5.53-4.5-10-10-10Z

Or maybe

M12 19.2c-2.5 0-4.71-1.28-6-3.2.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.232 7.232 0 01-6 3.2M12 5a3 3 0 010 6 3 3 0 010-6m0-3A10 10 0 1022 12c0-5.53-4.5-10-10-10Z

Or even

M12 19.2c-2.5 0-4.71-1.28-6-3.2.03-2 4-3.1 6-3.1s5.97 1.1 6 3.1a7.232 7.232 0 01-6 3.2M12 5a3 3 0 010 6 3 3 0 010-6m0-3a10 10 0 1010 10 10 10 0 00-10-10Z

If this was somehow implemented, it would make Iconify even smaller.

I've been going through the docs and I can't find a demonstration for this scenario. I have an Iconify JSON set (solar), and I want to extract all icons to a directory in SVG format. How can I accomplish this? Can someone link me to the documentation that shows this process?

When importing @iconify/tools into a TypeScript project it fails:

Could not find a declaration file for module '@iconify/tools'. './node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@iconify/tools/lib/index.mjs' implicitly has an 'any' type.

The simple fix is to add:

"types": "./lib/index.d.ts"

to package.json:

"exports": {
		"./*": "./*",
		".": {
			"require": "./lib/index.cjs",
			"import": "./lib/index.mjs",
			"types": "./lib/index.d.ts"
		},

When importing a single SVG file, the SVG class doesn't return the name of the file.

tools.ImportSVG('path-to-file.svg').then(svg => {
    // SVG was imported
    // Variable 'svg' is instance of SVG class
    console.log(svg.toString());
}).catch(err => {
    console.error(err);
});

The SVG class only has the following methods on it:

• toString()
• toMinifiedString()
• getBody()
• getDimensions()

And these following two properties:

• width
• height

It would be helpful to have a new method getName() or a new property name that will return the relevant SVG file name like the Collection class does.

Since the current version of svgo doesn't use native stable sort, maybe you could consider upgrading to svgo 3.0.2? It does require node.js 14+, so that may be a breaking change depending on how you run it.
Another bonus is that types are now included since 3.0.2.

https://github.com/svg/svgo/releases

I want to disable the duplicates check during the import process and want to import the duplicate items but ignoreDuplicates: false seems has no effect.

tools.ImportDir('directory', {
    ignoreDuplicates: false,
}).then(collection => {
    //
}).catch(err => {
    //
});

How do I disable the ignoreDuplicates check and import everything including the duplicates? Any help would be highly appreciated 😀

ref: https://unpkg.com/browse/[email protected]/lib/cheerio.d.ts

I can make a PR if possible.

• OS: macOS latest
• Browser: chrome latest
• Nuxt version: 3.8.1
• @iconify/tools version - 3.0.7

issue

1. I used the importDirectory function in nuxt3 and I get this error in the iconify internal function
   

2. so, Below is the part that uses importDirectory

<script setup>
import { importDirectory } from '@iconify/tools'

const iconSet = await importDirectory('../assets/icons', {
  prefix: 'datamaker'
})
console.log(iconSet)
</script>

3. In the terminal, you'll get an error like this
   

as the title
when the old name and the new name are the same, the icon will be removed

The Example in the README appears to be out of date.

These imports don't exist in utils 2.x:

import { promises as fs } from 'fs';
import { importDirectory } from '@iconify/tools/lib/import/directory';
import { cleanupSVG } from '@iconify/tools/lib/svg/cleanup';
import { runSVGO } from '@iconify/tools/lib/optimise/svgo';
import { parseColors, isEmptyColor } from '@iconify/tools/lib/colors/parse';

What are the new ones? 😊

When I use importFromFigma, it always throw a 404 error, after investigation, the real error is "ReferenceError: fetch is not defined"

So, I think this lib should handle error more elegant, and give a specific requirement of fetch. I use cross-fetch for now like:

import 'cross-fetch/polyfill'

Or integrated cross-fetch?

I can make a PR if possible.

Some icons are being shipped like this:

m7 10l5 5l5-5H7Z

In many cases this can be simplified to

m7 10l5 5l5-5Z

In the cases where a straight line isn't enough, this could still be simplified to

m7 10l5 5l5-5H7

/var/www # npm i @iconify/tools --save-dev
npm ERR! code ETARGET
npm ERR! notarget No matching version found for @iconify/utils@^2.0.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm -v
6.4.1

I have one icon with problematic syntax that cleanupCVG is having trouble.

I believe this is the line that is causing error:
<text x="465.1" y="269.5" fill="#bd0728" stroke="#fff" stroke-width="1.6" font-family="helvetica" font-size="25.6" transform="matrix(1.33 0 0 1.33 -363 -108)"><tspan>G</tspan></text>

I am importing it via directory import described here. I'm wondering why try/catch isn't catching it properly.
https://iconify.design/docs/libraries/tools/import/directory.html#examples

Thank you

nuxt  |  ERROR  [unhandledRejection] Unexpected element: <text>
nuxt  | 
nuxt  |   at node_modules/@iconify/tools/lib/svg/cleanup/bad-tags.cjs:53:13
nuxt  |   at isSync (node_modules/@iconify/tools/lib/svg/parse.cjs:65:7)
nuxt  |   at checkNode (node_modules/@iconify/tools/lib/svg/parse.cjs:19:5)
nuxt  |   at next (node_modules/@iconify/tools/lib/svg/parse.cjs:35:9)
nuxt  |   at next (node_modules/@iconify/tools/lib/svg/parse.cjs:33:18)
nuxt  |   at node_modules/@iconify/tools/lib/svg/parse.cjs:37:7
nuxt  |   at isSync (node_modules/@iconify/tools/lib/svg/parse.cjs:66:7)
nuxt  |   at checkNode (node_modules/@iconify/tools/lib/svg/parse.cjs:19:5)
nuxt  |   at next (node_modules/@iconify/tools/lib/svg/parse.cjs:35:9)
nuxt  |   at next (node_modules/@iconify/tools/lib/svg/parse.cjs:33:18)

What is the difference between iconify/tools and iconify/utils. The descriptions in the docs sound very similar: https://docs.iconify.design/tools/

Is one newer / the preferred method? Does each have functionality that the other doesn't, and if so, what?

import { SVG, cleanupSVG } from "@iconify/tools";

const reallyBadIcon = `<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1649832310065"
  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1294"
  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
  <defs>
    <style type="text/css">
      @font-face {
        font-family: feedback-iconfont;
        src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype");
      }
    </style>
  </defs>
  <path
    d="M393.142857 548.571429A82.285714 82.285714 0 0 1 475.428571 630.857143v201.142857A82.285714 82.285714 0 0 1 393.142857 914.285714h-201.142857A82.285714 82.285714 0 0 1 109.714286 832v-201.142857A82.285714 82.285714 0 0 1 192 548.571429h201.142857z m438.857143 0A82.285714 82.285714 0 0 1 914.285714 630.857143v201.142857A82.285714 82.285714 0 0 1 832 914.285714h-201.142857A82.285714 82.285714 0 0 1 548.571429 832v-201.142857A82.285714 82.285714 0 0 1 630.857143 548.571429h201.142857z m-438.857143 54.857142h-201.142857a27.428571 27.428571 0 0 0-27.428571 27.428572v201.142857c0 15.140571 12.288 27.428571 27.428571 27.428571h201.142857a27.428571 27.428571 0 0 0 27.428572-27.428571v-201.142857a27.428571 27.428571 0 0 0-27.428572-27.428572z m438.857143 0h-201.142857a27.428571 27.428571 0 0 0-27.428572 27.428572v201.142857c0 15.140571 12.288 27.428571 27.428572 27.428571h201.142857a27.428571 27.428571 0 0 0 27.428571-27.428571v-201.142857a27.428571 27.428571 0 0 0-27.428571-27.428572zM393.142857 109.714286A82.285714 82.285714 0 0 1 475.428571 192v201.142857A82.285714 82.285714 0 0 1 393.142857 475.428571h-201.142857A82.285714 82.285714 0 0 1 109.714286 393.142857v-201.142857A82.285714 82.285714 0 0 1 192 109.714286h201.142857z m438.857143 0A82.285714 82.285714 0 0 1 914.285714 192v201.142857A82.285714 82.285714 0 0 1 832 475.428571h-201.142857A82.285714 82.285714 0 0 1 548.571429 393.142857v-201.142857A82.285714 82.285714 0 0 1 630.857143 109.714286h201.142857z m-438.857143 54.857143h-201.142857a27.428571 27.428571 0 0 0-27.428571 27.428571v201.142857c0 15.140571 12.288 27.428571 27.428571 27.428572h201.142857a27.428571 27.428571 0 0 0 27.428572-27.428572v-201.142857a27.428571 27.428571 0 0 0-27.428572-27.428571z m438.857143 0h-201.142857a27.428571 27.428571 0 0 0-27.428572 27.428571v201.142857c0 15.140571 12.288 27.428571 27.428572 27.428572h201.142857a27.428571 27.428571 0 0 0 27.428571-27.428572v-201.142857a27.428571 27.428571 0 0 0-27.428571-27.428571z"
    p-id="1295"></path>
</svg>`;

(async () => {
  const svg = new SVG(reallyBadIcon);
  console.log(svg.getBody())
  await cleanupSVG(svg);
  console.log(svg.toMinifiedString());
})();

Do I have to delete style manually?

When I was using the exportJSONPackage API, I encountered a situation where I needed to customize the exports field of the package (add a types). I found that this is fixed, and would like to optimize it or have other considerations? Please let me know

Hi,
While using @iconify/[email protected] we are getting an installation warning:

warning @iconify/tools > svgo > [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility