Introduction
Strapi is developed by a (mostly) French team offering another very easy way to deploy a full-featured API for your front-end application.It is based on Node.js & React.js, can be self-hosted or deployed to the cloud (Digital Ocean, Heroku etc) and uses both a REST and a graphQL API for your requests.I usually look for two things in a headless CMS:- the ease of use, both for me as a developer and for my client, who often is a non-technical user.
- the potential for advanced customization, like adding custom input fields specific to the client's business use case.
Plugins
Plugins can be seen as a way to enhance your application and, if my understanding is correct, are themselves key components of Strapi as their whole schema builder (Content-Type Builder) and Media Library are indeed plugins.Talking about schema, creating new models for your content is extremely easy as Strapi provides a list of types directly available covering most of your needs.
Strapi's documentation is a good place to start, as it covers a lot of topics, from quick start to deployment. I quickly noticed the community was also very active with a lot of content available on Youtube.This section of the docs gives a basic understanding of the direction to take. In order to use font awesome icons.
3 Steps to Create Font Awesome Icons Plugin for Strapi
1) Generate a new plugin via the cli
yarn run strapi generate:plugin my-custom-field
2) Build your components
The next step is to build the component itself.react-fontawesome is a neat little package giving you the easy way to render a Font-Awesome icon in a react app out of the box, let's add it via.npm i @fortawesome/react-fontawesome npm i @fortawesome/free-solid-svg-iconsnpm i @strapi/design-systemimport React from 'react'
import { Grid, GridItem } from '@strapi/design-system/Grid'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Box } from '@strapi/design-system/Box'
import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar'
import { Tooltip } from '@strapi/design-system/Tooltip'
import { Typography } from '@strapi/design-system/Typography'
import { CopyToClipboard } from 'react-copy-to-clipboard'
const Field = props => {
console.log('myfirstfield', props)
const { name, value, onChange } = props
const iconsArray = Object.keys(fas)
.filter(icon => {
if (!value) {
return true
}
return icon.toLowerCase().includes(value.toLowerCase())
})
.sort()
return (
<>
<Box>
<Typography paddingBottom={9} style={{ fontWeight: '500' }}>
Icons
</Typography>
<Box paddingBottom={8}>
<SearchForm>
<Searchbar
name='searchbar'
value={value}
onChange={e => {
const arg = {
target: {
name,
value: e.target.value
}
}
onChange(arg)
}}
clearLabel='Clearing the asset search'
placeholder='Icons'
>
Search for an icon
</Searchbar>
</SearchForm>
</Box>
<Box padding={5} height='280px' overflow='scroll' background='neutral100'>
<Grid>
{iconsArray.map(icon => {
return (
<GridItem
padding={2}
col={2}
key={icon}
background={'neutral0'}
>
<Box
onClick={() => {
const arg = {
target: {
name,
value: icon
}
}
onChange(arg)
}}
>
<Tooltip description='Copy import'>
<CopyToClipboard text={icon}>
<Typography fontWeight='bold' as='button' type='button'>
<FontAwesomeIcon icon={fas[icon]} />
</Typography>
</CopyToClipboard>
</Tooltip>
</Box>
</GridItem>
)
})}
</Grid>
</Box>
</Box>
</>
)
}
export default Field
3) Expose the plugin to your application
Now that we have a functional icon library, we need to be able to use it within our CMS. And this is where it got tricky!The doc mentions registering the plugin and the new field via the admin indexsrc/plugins/my-custom-field/admin/src/index.jsimport { prefixPluginTranslations } from '@strapi/helper-plugin';
import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import myfirstfield from './components/MyFirstField'
const name = pluginPkg.strapi.name;
export default {
register(app) {
app.addFields([
{ type: 'my_custom_field_renderer', Component: myfirstfield },
]);
},
bootstrap(app) {},
async registerTrads({ locales }) {
const importedTrads = await Promise.all(
locales.map((locale) => {
return import(
/* webpackChunkName: "translation-[request]" */ `./translations/${locale}.json`
)
.then(({ default: data }) => {
return {
data: prefixPluginTranslations(data, pluginId),
locale,
};
})
.catch(() => {
return {
data: {},
locale,
};
});
})
);
return Promise.resolve(importedTrads);
},
};
"icons": {
"type": "string",
"customFieldConfig": {
"fieldRenderer": "my_custom_field_renderer"
}
}Victory, the font awesome icon library now shows up !!!!
Here we are! Changes are now recognized, can be saved to the database and are available via the API.
