Use Iconify custom fieldtype
Storyblok is the first headless CMS that works for developers & marketers alike.
Section titled Introduction Introduction
If you want to create attractive websites or applications, Iconify and Storyblok custom field-type are two valuable tools that can help. Iconify makes it easy to add custom icons to your project, while Storyblok custom field-type allows you to manage and display your content in a flexible way. In this article, we'll explain how you can use both Iconify and Storyblok custom field-type.
Section titled Create Iconify plugin Create Iconify plugin
Let’s start with the plugin, go to My Plugins.
)
Create a new field-type by clicking on + New Field type on top right and give a name : Iconify.
)
On save, you will access the editor, you should have the same screen as below :
)
Copy and paste code this code into the dedicated space :
const Fieldtype = {
mixins: [window.Storyblok.plugin],
template: `
<div>
<div class="uk-text-center" v-if="model.icon">
<div> Selected : <span style="font-weight: bold">{{ model.icon }}</span></div>
<div style="height: 48px; width: auto; padding:8px;display: flex; align-items:center; justify-content:center;">
<iconify-icon v-bind:icon="model.icon" style="height: 48px; width: auto; font-size: 48px"></iconify-icon>
<small style="cursor:pointer;" @click="removeIcon">(remove)</small>
</div>
</div>
<form class="uk-form" @submit.prevent="search">
<div class="uk-margin">
<input class="uk-input uk-form-width-medium" v-model="query" placeholder="Search icon" />
<button class="uk-button uk-button-default" type="submit">Search</button>
</div>
</form>
<span v-for="icon in iconify" :key="icon" style="cursor:pointer;" @click="setItem(icon)"
style="margin: 5px; height: 24px; width: auto; display: inline-block;">
<iconify-icon v-bind:icon="icon" style="font-size: 24px"></iconify-icon>
</span>
</div>`,
data() {
return {
iconify: [],
query: '',
}
},
methods: {
search() {
return fetch(`https://api.iconify.design/search?query=${this.query}`)
.then((response) => response.json())
.then((data) => {
this.iconify = data.icons;
});
},
initWith() {
return {
plugin: 'iconify',
icon: '',
}
},
setItem(name) {
this.model.icon = name;
},
removeIcon() {
this.model.icon = '';
},
pluginCreated() {
this.$sb.getScript('https://code.iconify.design/iconify-icon/1.0.3/iconify-icon.min.js');
}
},
watch: {
'model': {
handler: function (value) {
this.$emit('changed-model', value);
},
deep: true
}
}
}
Click on save, you should have the view updated :
)
You can test it, enter in the Field-type Preview a word, brand whatever you think, and check what you get.
If you are good with it, click on Publish.
Congratulations on creating your first Iconify Field-type plugin!
)
Section titled Implement and use your Iconify plugin Implement and use your Iconify plugin
Create a new Storyblok Project
Modify the feature block and create a new field icon which is a plugin and selects in Custom Type the plugin we have just created Iconify
)
Section titled Create an Astro project Create an Astro project
Use your Astro project or you can use this starter I made: https://github.com/jpkha/astro-storyblok-starter.
Install astro-iconify (https://github.com/manuelmeister/astro-iconify) instead of the official astro-icon.
With the latest, there is some issue with some Iconify Icon, it’s a known issue: https://github.com/natemoo-re/astro-icon/issues/29
Write the code below in the feature.astro file :
---
import { storyblokEditable } from "@storyblok/astro";
import { Icon } from 'astro-iconify';
const { blok } = Astro.props;
const icon = blok.icon.icon
---
<div {...storyblokEditable(blok)}>
<h2 class="text-center text-secondary text-xl font-bold">{blok.name}</h2>
<div class="flex justify-center pt-8">
{ icon &&
<Icon class="w-[100px] h-[100px] text-indigo-900" name={icon}/>
}
</div>
</div>
Depending on the icon you choose, from the code you can set the size, the color for example. Here I choose to display my icon in height and width 100px and color in indigo.
Section titled Let’s use the plugin and display icon in Astro project Let’s use the plugin and display icon in Astro project
Launch your Astro app and go to your Storyblok App.
You should have like below and now you can enjoy and choose an icon:
)
Now you can choose whatever Icon and get the icon in your Astro project.
You should have something similar :
)
Section titled Wrapping Up Wrapping Up
In summary, Iconify and Storyblok custom field-type are useful tools for developers to create visually appealing websites and applications. By adding customizable icons with Iconify and using Storyblok custom field-type to manage content, developers can create engaging user experiences. These tools offer flexibility and ease of use for stunning designs without extensive coding knowledge. With Iconify and Storyblok custom field-type, developers can enhance their projects and impress users with visually stunning content.
