Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.
This article will look at how to get started with UI development with Chakra UI Vue.
Icon
We can add an icon with the c-icon prop.
For instance, we can write:
<template>
<c-box>
<c-icon name="phone" :mr="2" />
<c-icon name="check-circle" size="24px" :mr="2" />
<c-icon name="warning" size="32px" color="red.500" :mr="2" />
</c-box>
</template>
<script>
import { CBox, CIcon } from "@chakra-ui/vue";
export default {
components: {
CBox,
CIcon,
},
};
</script>
name sets the name of the icon to display.
size has the size.
color has the color.
We can also add 3rd party icons with c-icon .
To do this, we write:
main.js
import Vue from "vue";
import Chakra, { CThemeProvider } from "@chakra-ui/vue";
import { faGlobeAfrica } from "@fortawesome/free-solid-svg-icons";
import App from "./App.vue";
Vue.use(Chakra, {
icons: {
iconPack: "fa",
iconSet: {
faGlobeAfrica
}
}
});
Vue.config.productionTip = false;
new Vue({
render: (h) => h(CThemeProvider, [h(App)])
}).$mount("#app");
App.vue
<template>
<c-box>
<c-icon name="globe-africa" />
</c-box>
</template>
<script>
import { CBox, CIcon } from "@chakra-ui/vue";
export default {
components: {
CBox,
CIcon,
},
};
</script>
We install the @fortawesome/free-solid-svg-icons package and add some options into the 2nd argument of Vue.use .
iconPack sets the icon pack to use.
iconSet has the icon we want to use.
Then we set name to show the icon in App.vue .
To add a custom icon, we can add our icons to the Chakra UI options.
To do this, we write:
main.js
import Vue from "vue";
import Chakra, { CThemeProvider } from "@chakra-ui/vue";
import App from "./App.vue";
const customIcons = {
fortranIcon: {
path: `
<path d="M19.536 0H4.464A4.463 4.463 0 0 0 0 4.464v15.073A4.463 4.463 0 0 0 4.464 24h15.073A4.463 4.463 0 0 0 24 19.536V4.464A4.463 4.463 0 0 0 19.536 0zm1.193 6.493v3.871l-.922-.005c-.507-.003-.981-.021-1.052-.041-.128-.036-.131-.05-.192-.839-.079-1.013-.143-1.462-.306-2.136-.352-1.457-1.096-2.25-2.309-2.463-.509-.089-2.731-.176-4.558-.177L10.13 4.7v5.82l.662-.033c.757-.038 1.353-.129 1.64-.252.306-.131.629-.462.781-.799.158-.352.262-.815.345-1.542.033-.286.07-.572.083-.636.024-.116.028-.117 1.036-.117h1.012v9.3h-2.062l-.035-.536c-.063-.971-.252-1.891-.479-2.331-.311-.601-.922-.871-2.151-.95a11.422 11.422 0 0 1-.666-.059l-.172-.027.02 2.926c.021 3.086.03 3.206.265 3.465.241.266.381.284 2.827.368.05.002.065.246.065 1.041v1.039H3.271v-1.039c0-.954.007-1.039.091-1.041.05-.001.543-.023 1.097-.049.891-.042 1.033-.061 1.244-.167a.712.712 0 0 0 .345-.328c.106-.206.107-.254.107-6.78 0-6.133-.006-6.584-.09-6.737a.938.938 0 0 0-.553-.436c-.104-.032-.65-.07-1.215-.086l-1.026-.027V2.622h17.458v3.871z"/>
`,
viewBox: "0 0 40 40"
}
};
Vue.use(Chakra, {
icons: {
extend: {
...customIcons
}
}
});
Vue.config.productionTip = false;
new Vue({
render: (h) => h(CThemeProvider, [h(App)])
}).$mount("#app");
App.vue
<template>
<c-box>
<c-icon name="fortranIcon" />
</c-box>
</template>
<script>
import { CBox, CIcon } from "@chakra-ui/vue";
export default {
components: {
CBox,
CIcon,
},
};
</script>
We have the customIcons object with the SVG path element set as the value of path .
Then we merge the customIcons object into extend .
And in App.vue , we set the name to the property name of the icon in customIcons .
Conclusion
We can add various kinds of icons easily with Chakra UI Vue.
