Storyblok Raises $80M Series C - Read News

What’s the True Total Price of Enterprise CMS? Find out here.

Skip to main content

Use Iconify custom fieldtype

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.

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!

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

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.

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 :

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.

Author

 Jean-Philippe Kha

Jean-Philippe Kha

Frontend Engineer at the web agency @Pickbeam in France. He’s an enthusiastic engineer with a passion for modern web and CSS. His stack is Typescript, React, Next.js, Angular, and Rxjs.