1.0.2 • Published 1 year ago
@uniland-ui/u-icon v1.0.2
@uniland-ui/u-icon
A component to display icons in the browser
Installation
yarn add @uniland-ui/u-icon
# or
npm i @uniland-ui/u-icon
Adding custom icons
All uniland icons are registered in the uniland plugin under the icons.extend
key. So you
can extend this object to add your own icons. Here are the steps:
- Export the icon's
svg
from Figma, Sketch, etc. - Use a tool like SvgOmg to reduce the size and minify the markup.
- Add the icon to the theme object.
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 uniland plugin
const app = createApp(App)
.use(unilandUIVuePlugin, {
icons: {
// ...
extend: customIcons
}
})
You can now consume your custom icons in your template like this:
<template>
<u-icon name="icon1" color="yellow.600" />
<u-icon name="icon2" color="green.300" />
</template>
You can access the full merged icons object under
this.$uniland.icons
in your Vue components.