pkp/pkp-lib#9626 Remove fontawesome support from icon component

src/components/Icon/Icon.mdx

@@ -10,7 +10,7 @@ import * as IconStories from './Icon.stories.js';
 
 Use this component to display an icon. Use icons when you want to visually connect two parts of the UI that are not otherwise connected. For example, the [ListPanel](#/component/ListPanel) filters use an icon to link the button with the panel it controls.
 
-Use any [FontAwesome v4 icon](https://fontawesome.com/v4/icons/).
+Use any icons from our [Icon Gallery](?path=/story/components-icon--icon-gallery).
 
 ## Be careful when using icon-only labels
 
@@ -22,14 +22,15 @@ When adding buttons or other controls, do not add an icon when the text label su
 
 ## Help Icon
 
-The `info-circle` icon is reserved for providing help on how to use the software.
+The `Help` icon is reserved for providing information on how to use the software.
 
-<Story of={IconStories.InfoCircle} />
-## Warning Icon
+<Story of={IconStories.Help} />
 
-The `exclamation-triangle` icon is reserved for warning the user about an error, urgent information, or a serious consequence of an expected action.
+## Error / Warning Icon
 
-<Story of={IconStories.ExclamationTriangle} />
+The `Error` icon is reserved for warning the user about an error, urgent information, or a serious consequence of an expected action.
+
+<Story of={IconStories.Error} />
 
 <Primary />
 <Controls />

src/components/Icon/Icon.stories.js

@@ -14,16 +14,16 @@ export default {
 	}),
 };
 
-export const Bug = {
-	args: {icon: 'bug'},
+export const UsefulTips = {
+	args: {icon: 'UsefulTips', class: 'h-5 w-5'},
 };
 
-export const InfoCircle = {
-	args: {icon: 'Help', class: 'w-5 h-5'},
+export const Help = {
+	args: {icon: 'Help', class: 'h-5 w-5'},
 };
 
-export const ExclamationTriangle = {
-	args: {icon: 'exclamation-triangle'},
+export const Error = {
+	args: {icon: 'Error', class: 'h-5 w-5'},
 };
 
 export const InlineIcon = {
@@ -37,10 +37,27 @@ export const InlineIcon = {
 		`,
 	}),
 
-	args: {icon: 'search', inline: true},
+	args: {icon: 'Search', class: 'h-5 w-5', inline: true},
 };
 
-export const iconGallery = {
+export const VerticallyAligned = {
+	render: (args) => ({
+		components: {Icon},
+		setup() {
+			return {args};
+		},
+		template: `
+			<div class="flex items-center space-x-1">
+				<span>Add files</span>
+				<Icon v-bind="args" />
+			</div>
+		`,
+	}),
+
+	args: {icon: 'Add', class: 'h-4 w-4', inline: true},
+};
+
+export const IconGallery = {
 	render: (args) => ({
 		components: {Icon},
 		setup() {

src/components/Icon/Icon.vue

@@ -1,12 +1,7 @@
 <template>
-	<span
-		v-if="isSvgIcon"
-		class="inline-block align-middle rtl:scale-x-[-1]"
-		:class="{'text-negative': icon === 'Error'}"
-	>
+	<span :class="classes">
 		<component :is="svgIcons[icon]"></component>
 	</span>
-	<span v-else class="fa" :class="classes" aria-hidden="true"></span>
 </template>
 
 <script setup>
@@ -230,24 +225,19 @@ const svgIcons = {
 };
 
 const props = defineProps({
-	/** Which <a href="https://fontawesome.com/">FontAwesome</a> icon to use. Drop the `fa-` prefix from the class name.
-	 * If you want to use `fa-bug`, the value of this prop should be `bug`.  */
-	icon: String,
+	/** Which icon to use from our [Icon Gallery](?path=/story/components-icon--icon-gallery) */
+	icon: {type: String, required: true},
 	/** Use when an icon sits alongside text to ensure adequate spacing between the icon and text. */
 	inline: Boolean,
 });
 
-const isSvgIcon = computed(() => !!svgIcons[props.icon]);
-
 const classes = computed(() => {
-	let classes = [];
-	if (props.icon !== 'orcid') {
-		classes.push('fa-' + props.icon);
-	}
-	if (props.inline) {
-		classes.push('pkpIcon--inline');
-	}
-	return classes;
+	return {
+		'inline-block align-middle rtl:scale-x-[-1]': true,
+		'text-negative': props.icon === 'Error',
+		'text-success': props.icon === 'Help',
+		'pkpIcon--inline': props.inline,
+	};
 });
 </script>