
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
@chakra-ui/c-icon
Advanced tools
Chakra UI Vue | A component to display icons in the browser component
A component to display icons in the browser
yarn add @chakra-ui/c-icon
# or
npm i @chakra-ui/c-icon
If you with to create new icons on the fly, you can create an icon component which accepts Chakra UI style props using the createIcon
API as shown below:
const DocumentationIcon = createIcon({
name: "Documentation",
viewBox: "0 2.4 24 24",
path: `<path fill="currentColor" d="M6 24.4q-.825 0-1.413-.587T4 22.4v-16q0-.825.588-1.412T6 4.4h12q.825 0 1.413.588T20 6.4v16q0 .825-.588 1.413T18 24.4H6Zm0-2h12v-16h-2v6.125q0 .3-.25.438t-.5-.013L13.5 11.9l-1.75 1.05q-.25.15-.5.013t-.25-.438V6.4H6v16Zm5-16h5h-5Zm-5 0h12H6Z"/>`,
})
This creates a DocumentationIcon
component that you can style with Chakra UI props as shown in the template below:
<template>
<DocumentationIcon :box-size="20" color="tomato" />
</template>
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.
// Step 1: Each icon should be stored as an object of `path` and `viewBox`
const customIcons = {
icon1: {
path: `<path fill="currentColor" d="..." />`,
// If the icon's viewBox is `0 0 24 24`, you can ignore `viewBox`
viewBox: "0 0 40 40",
},
icon2: {
path: `
<g fill="currentColor">
<path d="..."/>
</g>
`
}
};
// Step 2: Add the custom icon to the Chakra plugin
const app = createApp(App)
.use(ChakraUIVuePlugin, {
icons: {
// ...
extend: customIcons
}
})
You can now consume your custom icons in your template like this:
<template>
<c-icon name="icon1" color="yellow.600" />
<c-icon name="icon2" color="green.300" />
</template>
You can access the full merged icons object under
this.$chakra.icons
in your Vue components.
FAQs
Chakra UI Vue | A component to display icons in the browser component
The npm package @chakra-ui/c-icon receives a total of 67 weekly downloads. As such, @chakra-ui/c-icon popularity was classified as not popular.
We found that @chakra-ui/c-icon demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.