Installations
npm install @purge-icons/coreDeveloper Guide
Typescript
Yes
Module System
CommonJS, ESM
Node Version
20.4.0
NPM Version
lerna/3.22.1/node@v20.4.0+arm64 (darwin)
Score
55.3
Supply Chain
98
Quality
74.9
Maintenance
50
Vulnerability
98.9
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (93.08%)
JavaScript (4.64%)
HTML (2.28%)
Developer
Download Statistics
Total Downloads
1,766,409
Last Day
1,680
Last Week
10,747
Last Month
45,234
Last Year
577,345
GitHub Statistics
228 Stars
94 Commits
18 Forks
6 Watching
1 Branches
10 Contributors
Maintainers
Package Meta Information
Latest Version
0.10.0
Package Id
@purge-icons/core@0.10.0
Unpacked Size
37.30 kB
Size
9.98 kB
File Count
7
NPM Version
lerna/3.22.1/node@v20.4.0+arm64 (darwin)
Node Version
20.4.0
Publised On
18 Nov 2023
Total Downloads
Cumulative downloads
Total Downloads
1,766,409
Last day
-12.7%
1,680
Compared to previous day
Last week
6.5%
10,747
Compared to previous week
Last month
3.8%
45,234
Compared to previous month
Last year
2.7%
577,345
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
It's now recommended to use UnoCSS Icons, unplugin-icons or Iconify Icon Components instead of this approach.
PurgeIcons
Bundles only the icons you use
Think about TailwindCSS + PurgeCSS, but for Icons.
Intro
PurgeIcons is heavily inspired from PurgeCSS. It analyzes your source code or dist files, extracting the icon names you used, and then bundle the icons' data (SVGs) into your code.
You will only get icons you need. No extra bandwidth, no unused icons, no compromise.
Underneath, it's powered by Iconify, which you get access to 80+ popular open source iconsets with over 5,000 icons to choice, including Material Design Icons, Font Awesome, Octicon and even Emojis!
Browser the icon sets in Icônes or Iconify.
Usage
Just like what you used to do for Iconify.
1<span class="iconify" data-icon="fa:home"></span>
Or even dynamic
1const span = createElement('span') 2span.class = 'iconify' 3span.data.icon = isDark ? 'carbon:moon' : 'carbon:sun' 4 5// DON'T, PurgeIcons won't extract them correct. 6// add them to `included` to be always bundled if you really want this 7span.data.icon = `carbon:${isDark ? 'moon' : 'sun'}`
Install
PurgeIcons is designed to be framework independent, but using framework plugins is the most recommended way to get started. Check out the supported frameworks in the following list. We are trying to make more frameworks able to use PurgeIcons out-of-box. Pull requests are great welcome!
Official Plugins
| Plugin | Example | Template | |
|---|---|---|---|
| Vite | vite-plugin-purge-icons | Example | Vitesse |
| Nuxt | nuxt-plugin-purge-module | Example | |
| Vue CLI | Coming... | ||
| Gridsome | Coming... | ||
| Parcel | Coming... | ||
| Webpack | purge-icons-webpack-plugin | ||
| Rollup | rollup-plugin-purge-icons |
Command Line Interface
The CLI is still working in progress and the design is not yet finalized.
You can either install PurgeIcons as a dev dependency and use the CLI with npx or you can also install PurgeIcons globally:
1npm i -g purge-icons 2
Scan the all the html file and geneted a mjs bundle
1purge-icons --content 'src/*.html' --format mjs --output output.js
From multiple sources and use args shorthands, format can be auto inferred from the output option
1purge-icons -c 'index.html,src/**/*.vue' -o output.ts
Or export plain json file for other tools to process
1purge-icons -c index.html -o output.json
See more options by
1purge-icons --help
Programmatic API
Programmatic API is still working in progress as well.
For programmatic use only, you can use @purge-icons/core
1npm i -D @purge-icons/core
1import { PurgeIconsOptions, PurgeIcons } from '@purge-icons/core'
2
3const code = await PurgeIcons({
4 // globs for searching source file to analyze
5 content: [
6 '**/*.html',
7 '**/*.js',
8 '**/*.vue', // scan for .vue file as well
9 ],
10 // whitelist for icons that might be used dynamically
11 included: [
12 'mdi:account-circle-outline', // from Material Design Icons
13 'fa:camera', // from Font Awesome 4
14 ],
15 format: 'mjs'
16})
17
18// code is generated with inlined icons's data, bundle the file and it's done.
19fs.promises.writeFiles('./icons.mjs', code, 'utf-8')Options
1export interface PurgeIconsOptions { 2 content?: (string | RawContent)[] 3 included?: string[] 4 extractors?: Extractor[] 5 iconSource?: IconSource // default to 'auto' 6}
How It Works
Iconify is an icon framework that provide an unified syntax to use icons from its huge collections on-demanded. Each icon set has a id as the prefix of for its icons. For example:
1<span class="iconify" data-icon="fa:home"></span> <!-- Font Awesome --> 2<span class="iconify" data-icon="noto:bird"></span> <!-- Note Icons --> 3<span class="iconify" data-icon="mdi:alert"></span> <!-- Material Design Icons -->
Iconify achieve that by building up a API service that only send the icons you need. It provides a great flexibility that you can try with different design style and without to worry about including a large amount of unused icons that eat up your bandwidth and slow down your page load.
However, the downside of API querying is that the icons won't be available on the first meaningful paint and your app will be heavy relied on the API servers' status and so its accessability for your users. Iconify also provides the offline solution by implementing frameworks components. In that way, you would need to manually import every icon you use.
Thus, PurgeIcons was born. By scanning your code, it generates bundles for Iconify and load them synchronously. You can use icons in the exact same way as you would with the API based solution.
TODO
- CLI output
- Better caching
- Plugins for frameworks (Vue CLI, Nuxt.js, Next.js, etc.) PR welcome!
- Font-based icons (Javascript Free)
License
MIT License © 2020 Anthony Fu
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 9/30 approved changesets -- score normalized to 3
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 9 are checked with a SAST tool
Reason
67 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
- Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
Score
2.1
/10
Last Scanned on 2024-12-23
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More