feat: add Icons plugin

* Change existing icons to React wrapper components

* Add `icons` plugin to expose Icon components to plugin system

* Create components that re-export Lock and Unlock components so they can be changed separately in Authorise top button and Authorise operation summary button

* Add new Lock and Unlock icons to `auth` plugin

---------

Co-authored-by: Vladimír Gorej <vladimir.gorej@smartbear.com>

src/core/components/auth/authorization-popup.jsx

@@ -12,6 +12,7 @@ export default class AuthorizationPopup extends React.Component {
     let { authSelectors, authActions, getComponent, errSelectors, specSelectors, fn: { AST = {} } } = this.props
     let definitions = authSelectors.shownDefinitions()
     const Auths = getComponent("auths")
+    const CloseIcon = getComponent("CloseIcon")
 
     return (
       <div className="dialog-ux">
@@ -22,9 +23,7 @@ export default class AuthorizationPopup extends React.Component {
               <div className="modal-ux-header">
                 <h3>Available authorizations</h3>
                 <button type="button" className="close-modal" onClick={ this.close }>
-                  <svg width="20" height="20">
-                    <use href="#close" xlinkHref="#close" />
-                  </svg>
+                  <CloseIcon />
                 </button>
               </div>
               <div className="modal-ux-content">

src/core/components/auth/authorize-btn.jsx

@@ -14,14 +14,14 @@ export default class AuthorizeBtn extends React.Component {
 
     //must be moved out of button component
     const AuthorizationPopup = getComponent("authorizationPopup", true)
+    const LockAuthIcon = getComponent("LockAuthIcon", true)
+    const UnlockAuthIcon = getComponent("UnlockAuthIcon", true)
 
     return (
       <div className="auth-wrapper">
         <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={onClick}>
           <span>Authorize</span>
-          <svg width="20" height="20">
-            <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
-          </svg>
+          {isAuthorized ? <LockAuthIcon /> : <UnlockAuthIcon />}
         </button>
       { showPopup && <AuthorizationPopup /> }
       </div>

src/core/components/auth/authorize-operation-btn.jsx

@@ -4,7 +4,8 @@ import PropTypes from "prop-types"
 export default class AuthorizeOperationBtn extends React.Component {
     static propTypes = {
       isAuthorized: PropTypes.bool.isRequired,
-      onClick: PropTypes.func
+      onClick: PropTypes.func,
+      getComponent: PropTypes.func.isRequired
     }
 
   onClick =(e) => {
@@ -17,15 +18,16 @@ export default class AuthorizeOperationBtn extends React.Component {
   }
 
   render() {
-    let { isAuthorized } = this.props
+    let { isAuthorized, getComponent } = this.props
+
+    const LockAuthOperationIcon = getComponent("LockAuthOperationIcon", true)
+    const UnlockAuthOperationIcon = getComponent("UnlockAuthOperationIcon", true)
 
     return (
-      <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"}
+      <button className="authorization__btn"
         aria-label={isAuthorized ? "authorization button locked" : "authorization button unlocked"}
         onClick={this.onClick}>
-        <svg width="20" height="20">
-          <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
-        </svg>
+        {isAuthorized ? <LockAuthOperationIcon className="locked" /> : <UnlockAuthOperationIcon className="unlocked"/>}
       </button>
 
     )