# ghostkit/3.3.2/gutenberg/blocks/icon/index.js

Block Animations, Motion & Scroll Effects – Ghost Kit, version 3.3.2. 45 lines.

- Page: https://pluginprobe.com/plugins/ghostkit/3.3.2/code/gutenberg/blocks/icon/index.js
- Raw: https://pluginprobe.com/plugins/ghostkit/3.3.2/raw/gutenberg/blocks/icon/index.js
- Modified: 2024-02-18T18:40:24+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ghostkit/3.3.2/code/gutenberg/blocks/icon/index.js#L10-L20`.

```javascript
import getIcon from '../../utils/get-icon';
import metadata from './block.json';
import edit from './edit';
import save from './save';

const { name } = metadata;
export { metadata, name };

export const settings = {
	icon: getIcon('block-icon', true),
	ghostkit: {
		previewUrl: 'https://www.ghostkit.io/docs/blocks/icon/',
		customStylesCallback(attributes) {
			const {
				justify,
				width,
				color,
				backgroundColor,
				backgroundGradient,
			} = attributes;
			const styles = {
				'--gkt-icon__color': color || undefined,
				'--gkt-icon__background':
					backgroundColor || backgroundGradient || undefined,
				'--gkt-icon__width': undefined,
				'--gkt-icon__justify': undefined,
			};

			if (justify === 'start') {
				styles['--gkt-icon__justify'] = 'flex-start';
			} else if (justify === 'end') {
				styles['--gkt-icon__justify'] = 'flex-end';
			}

			if (typeof width !== 'undefined' && width !== '') {
				styles['--gkt-icon__width'] = width;
			}

			return styles;
		},
	},
	edit,
	save,
};

```