Feat: Icon Library (#3317)

* add icon library in global settings

* change ProControl type

* create reusable component

* add icons to icon library

* improve code readability

* updated premium notice text

* update popover

* add debounce

prevent frequent api calls when changing item names

* fix remaining issues

* if show premium notices are disabled, also hide this

---------

Co-authored-by: Benjamin Intal <[email protected]>
Co-authored-by: [email protected] <>

Author: kaeizen

src/components/font-awesome-icon/index.js

@@ -80,6 +80,10 @@ const addSVGAttributes = ( svgHTML, attributesToAdd = {}, attributesToRemove = [
 }
 
 const FontAwesomeIcon = memo( props => {
+	const { 
+		svgAttrsToAdd = { width: '32', height: '32' },
+		svgAttrsToRemove = [ 'id', 'data-name' ],
+	} = props
 	const [ forceUpdateCount, setForceUpdateCount ] = useState( 0 )
 	const forceUpdate = () => {
 		setForceUpdateCount( forceUpdateCount + 1 )
@@ -91,7 +95,7 @@ const FontAwesomeIcon = memo( props => {
 	if ( typeof props.value === 'string' && props.value.match( /^<svg/ ) ) {
 		let svg = addSVGAriaLabel( props.value, props.ariaLabel )
 		// Add fallback SVG width and height values.
-		svg = addSVGAttributes( svg, { width: '32', height: '32' } )
+		svg = addSVGAttributes( svg, svgAttrsToAdd, svgAttrsToRemove )
 		return <RawHTML { ...propsToPass }>{ props.prependRenderString + svg }</RawHTML>
 	}
 
@@ -109,7 +113,7 @@ const FontAwesomeIcon = memo( props => {
 
 		let svg = addSVGAriaLabel( iconHTML, props.ariaLabel )
 		// Add fallback SVG width and height values.
-		svg = addSVGAttributes( svg, { width: '32', height: '32' } )
+		svg = addSVGAttributes( svg, svgAttrsToAdd, svgAttrsToRemove )
 		return <RawHTML { ...propsToPass }>{ props.prependRenderString + svg }</RawHTML>
 	}
 
@@ -123,7 +127,7 @@ const FontAwesomeIcon = memo( props => {
 
 	let svg = addSVGAriaLabel( iconHTML, props.ariaLabel )
 	// Add fallback SVG width and height values.
-	svg = addSVGAttributes( svg, { width: '32', height: '32' } )
+	svg = addSVGAttributes( svg, svgAttrsToAdd, svgAttrsToRemove )
 	return <RawHTML { ...propsToPass }>{ props.prependRenderString + svg }</RawHTML>
 } )
 

src/components/icon-search-popover/index.js

@@ -11,7 +11,9 @@ import {
 	PanelBody, TextControl, Spinner,
 } from '@wordpress/components'
 import { __ } from '@wordpress/i18n'
-import { useState, useEffect } from '@wordpress/element'
+import {
+	useState, useEffect, Fragment,
+} from '@wordpress/element'
 
 /**
  * External dependencies
@@ -25,6 +27,7 @@ import {
 import { faGetIcon, faFetchIcon } from '~stackable/util'
 import { FileDrop } from 'react-file-drop'
 import classnames from 'classnames'
+import { applyFilters, doAction } from '@wordpress/hooks'
 
 let searchTimeout = null
 let tempMediaUpload = null
@@ -83,7 +86,7 @@ export const cleanSvgString = svgString => {
 
 const IconSearchPopover = props => {
 	const [ value, setValue ] = useState( '' )
-	const [ results, setResults ] = useState( [] )
+	const [ results, setResults ] = useState( { faIcons: [], iconLibrary: [] } )
 	const [ isBusy, setIsBusy ] = useState( false )
 	const [ isDropping, setIsDropping ] = useState( false )
 
@@ -151,6 +154,9 @@ const IconSearchPopover = props => {
 			fr.onload = function( e ) {
 				setIsDropping( false )
 				const svgString = cleanSvgString( addCustomIconClass( e.target.result ) )
+
+				doAction( 'stackable.icon-search-popover.svg-upload', svgString )
+
 				props.onChange( svgString )
 				props.onClose()
 			}
@@ -168,6 +174,8 @@ const IconSearchPopover = props => {
 		'ugb-icon--has-reset': props.allowReset,
 	} )
 
+	const IconLibraryIcons = applyFilters( 'stackable.global-settings.inspector.icon-library.icons', Fragment )
+
 	const content = (
 		<div className="stk-icon-search-popover-container">
 			<FileDrop
@@ -191,6 +199,8 @@ const IconSearchPopover = props => {
 					fr.onload = function( e ) {
 						setIsDropping( false )
 						const svgString = cleanSvgString( addCustomIconClass( e.target.result ) )
+
+						doAction( 'stackable.icon-search-popover.svg-upload', svgString )
 						props.onChange( svgString )
 						props.onClose()
 					}
@@ -244,13 +254,26 @@ const IconSearchPopover = props => {
 				</div>
 				<div className="ugb-icon-popover__iconlist">
 					{ isBusy && <Spinner /> }
-					{ ! isBusy && results.map( ( { prefix, iconName }, i ) => {
+					{ ! isBusy && <IconLibraryIcons
+						icons={ results.iconLibrary }
+						onChange={ props.onChange }
+						onClose={ props.onClose }
+					/> }
+					{ ! isBusy && results.faIcons.map( ( { prefix, iconName }, i ) => {
 						const iconValue = `${ prefix }-${ iconName }`
 						return <button
 							key={ i }
 							className={ `components-button ugb-prefix--${ prefix } ugb-icon--${ iconName }` }
 							onClick={ async () => {
-								if ( props.returnSVGValue ) {
+								if ( props.returnSVGValue && props.returnIconName ) {
+									let svgIcon = faGetIcon( prefix, iconName )
+
+									if ( ! svgIcon ) {
+										await faFetchIcon( prefix, iconName )
+										svgIcon = faGetIcon( prefix, iconName )
+									}
+									props.onChange( cleanSvgString( svgIcon ), prefix, iconName )
+								} else if ( props.returnSVGValue ) {
 									let svgIcon = faGetIcon( prefix, iconName )
 
 									if ( ! svgIcon ) {
@@ -267,7 +290,7 @@ const IconSearchPopover = props => {
 							<FontAwesomeIcon prefix={ prefix } iconName={ iconName } />
 						</button>
 					} ) }
-					{ ! isBusy && ! results.length &&
+					{ ! isBusy && ! results.faIcons.length && ! results.iconLibrary.length &&
 						<p className="components-base-control__help">{ __( 'No matches found', i18n ) }</p>
 					}
 				</div>

src/components/icon-search-popover/search.js

@@ -1,3 +1,4 @@
+import { applyFilters } from '@wordpress/hooks'
 import {
 	fontAwesomeSearchProIcons, iconsFaKit, iconsFaProKitVersion, iconsFaFreeKitVersion,
 } from 'stackable'
@@ -23,13 +24,17 @@ export const searchFontAwesomeIconName = async ( name = 'icon', isPro = fontAwes
 	  } )
 		.then( r => r.json() )
 
-	return data.data.search.reduce( ( iconResults, iconData ) => {
+	const faIcons = data.data.search.reduce( ( iconResults, iconData ) => {
 		convertFontAwesomeToIcon( iconData, isPro ).forEach( icon => {
 			iconResults.push( icon )
 		} )
 
 		return iconResults
 	}, [] )
+
+	const iconLibrary = applyFilters( 'stackable.global-settings.inspector.icon-library.search-icons', null, name )
+
+	return { faIcons, iconLibrary }
 }
 
 /**

src/components/index.js

@@ -115,3 +115,4 @@ export { default as ColumnsWidthMultiControl } from './columns-width-multi-contr
 export { default as Popover } from './popover'
 export { default as HelpTooltip } from './help-tooltip'
 export { default as RichText } from './rich-text'
+export { default as SortablePicker } from './sortable-picker'

src/components/pro-control/index.js

@@ -109,6 +109,14 @@ const LABELS = {
 			<li>{ __( 'Hide the current post - great for synced patterns', i18n ) }</li>
 		</ul>,
 	},
+	'icon-library': {
+		title: __( 'Unlock Your Icon Library', i18n ),
+		description: <ul>
+			<li>{ __( 'Add your custom SVG icons', i18n ) }</li>
+			<li>{ __( 'Easily access your custom icons in the icon picker', i18n ) }</li>
+			<li>{ __( 'Organize your custom icons in your library', i18n ) }</li>
+		</ul>,
+	},
 }
 
 const ProControl = props => {