feat: Add Icon component

src/components/Icon/Icon.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import '@affinitic/volto-icon-selector-widget/styles/style.less';
+
+const Icon = (props) => {
+  const { name, size } = props;
+  const formatedName = name
+    .split(' ')
+    .map((separetedName) => `fa-${separetedName}`)
+    .join(' ');
+  return <i className={`af-icon fa-solid ${formatedName} ${size}`}></i>;
+};
+
+export default Icon;

src/components/index.js

@@ -0,0 +1,3 @@
+import Icon from './Icon/Icon';
+
+export { Icon };

src/default/ResultRenderer.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Icon, Popup } from 'semantic-ui-react';
+import { Popup } from 'semantic-ui-react';
+import { Icon } from '@affinitic/volto-icon-selector-widget/components';
 
 const ResultRenderer = (props) => {
   return <Popup trigger={<Icon name={props.name} />}>{props.name}</Popup>;

src/styles/af-icon.less

@@ -0,0 +1,50 @@
+i.mini.af-icon,
+i.mini.af-icons {
+  font-size: @mini;
+  line-height: 1;
+}
+
+i.tiny.af-icon,
+i.tiny.af-icons {
+  font-size: @tiny;
+  line-height: 1;
+}
+
+i.small.af-icon,
+i.small.af-icons {
+  font-size: @small;
+  line-height: 1;
+}
+
+i.af-icon,
+i.af-icons {
+  font-size: @medium;
+}
+
+i.large.af-icon,
+i.large.af-icons {
+  font-size: @large;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+i.big.af-icon,
+i.big.af-icons {
+  font-size: @big;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+i.huge.af-icon,
+i.huge.af-icons {
+  font-size: @huge;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+i.massive.af-icon,
+i.massive.af-icons {
+  font-size: @massive;
+  line-height: 1;
+  vertical-align: middle;
+}

src/styles/style.less

@@ -4,6 +4,7 @@
 @import './fontawesome/brands.less';
 
 @import 'variables';
+@import 'af-icon';
 
 @fa-font-path: '../webfonts';
 

src/view/IconSelectorWidget.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import cx from 'classnames';
-import { Icon } from 'semantic-ui-react';
+import { Icon } from '@affinitic/volto-icon-selector-widget/components';
 
 const IconSelectorWidget = (props) => {
   const { value, className } = props;

src/widget/IconSelectorWidget.jsx

@@ -1,10 +1,10 @@
 import _ from 'lodash';
 import React, { useState } from 'react';
 import { FormFieldWrapper } from '@plone/volto/components';
-import { Search, Icon } from 'semantic-ui-react';
+import { Search } from 'semantic-ui-react';
+import { Icon } from '@affinitic/volto-icon-selector-widget/components';
 import { useIntl, defineMessages } from 'react-intl';
 import config from '@plone/volto/registry';
-import '../styles/style.less';
 
 const messages = defineMessages({
   placeholder: {