Gathering detailed insights and metrics for @chakra-ui/c-icon
Gathering detailed insights and metrics for @chakra-ui/c-icon
Gathering detailed insights and metrics for @chakra-ui/c-icon
Gathering detailed insights and metrics for @chakra-ui/c-icon
⚡️ The next most epic version of Chakra UI Vue based on Vue 3 🚀(WIP)
npm install @chakra-ui/c-icon
Typescript
Module System
Node Version
NPM Version
@chakra-ui/vue-next@2.1.0-beta.11
Updated on Mar 28, 2023
@chakra-ui/vue-next@2.1.0-beta.10
Updated on Mar 28, 2023
@chakra-ui/vue-next@2.1.0-beta.8
Updated on Mar 21, 2023
@chakra-ui/vue-next@2.1.0-beta.7
Updated on Mar 14, 2023
@chakra-ui/vue-next@2.1.0-beta.6
Updated on Mar 12, 2023
@chakra-ui/vue-next@2.1.0-beta.5
Updated on Mar 12, 2023
TypeScript (81.11%)
Vue (17.15%)
JavaScript (0.74%)
EJS (0.74%)
HTML (0.27%)
Total Downloads
26,649
Last Day
10
Last Week
81
Last Month
286
Last Year
3,872
MIT License
259 Stars
1,381 Commits
32 Forks
10 Watchers
80 Branches
16 Contributors
Updated on Jun 11, 2025
Minified
Minified + Gzipped
Latest Version
1.0.0-alpha.13
Package Id
@chakra-ui/c-icon@1.0.0-alpha.13
Unpacked Size
483.66 kB
Size
27.20 kB
File Count
11
NPM Version
8.11.0
Node Version
16.16.0
Cumulative downloads
Total Downloads
Last Day
25%
10
Compared to previous day
Last Week
72.3%
81
Compared to previous week
Last Month
-21.4%
286
Compared to previous month
Last Year
-32%
3,872
Compared to previous year
1
1
A component to display icons in the browser
1yarn add @chakra-ui/c-icon 2# or 3npm i @chakra-ui/c-icon
All Chakra icons are registered in the Chakra plugin under the icons.extend
key. So you
can extend this object to add your own icons. Here are the steps:
svg
from Figma, Sketch, etc.Add the
fill=currentColor
attribute to thepath
org
so that when you this<Icon color="gray.200"/>
, it works correctly.
1// Step 1: Each icon should be stored as an object of `path` and `viewBox` 2const customIcons = { 3 icon1: { 4 path: `<path fill="currentColor" d="..." />`, 5 // If the icon's viewBox is `0 0 24 24`, you can ignore `viewBox` 6 viewBox: "0 0 40 40", 7 }, 8 icon2: { 9 path: ` 10 <g fill="currentColor"> 11 <path d="..."/> 12 </g> 13 ` 14 } 15}; 16 17// Step 2: Add the custom icon to the Chakra plugin 18const app = createApp(App) 19 .use(ChakraUIVuePlugin, { 20 icons: { 21 // ... 22 extend: customIcons 23 } 24 })
You can now consume your custom icons in your template like this:
1<template> 2 <c-icon name="icon1" color="yellow.600" /> 3 <c-icon name="icon2" color="green.300" /> 4</template>
You can access the full merged icons object under
this.$chakra.icons
in your Vue components.
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
no binaries found in the repo
Reason
Found 7/15 approved changesets -- score normalized to 4
Reason
project is archived
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
security policy file not detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
56 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
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