Merge pull request #3418 from aleatham/xlink-deprecated

Added href attribute to <use> tags with deprecated xlinkHref attribute.

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

@@ -23,7 +23,7 @@ export default class AuthorizationPopup extends React.Component {
                 <h3>Available authorizations</h3>
                 <button type="button" className="close-modal" onClick={ this.close }>
                   <svg width="20" height="20">
-                    <use xlinkHref="#close" />
+                    <use href="#close" xlinkHref="#close" />
                   </svg>
                 </button>
               </div>

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

@@ -25,7 +25,7 @@ export default class AuthorizeBtn extends React.Component {
         <button className={isAuthorized ? "btn authorize locked" : "btn authorize unlocked"} onClick={ this.onClick }>
           <span>Authorize</span>
           <svg width="20" height="20">
-            <use xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
+            <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
           </svg>
         </button>
       { showPopup && <AuthorizationPopup /> }

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

@@ -24,7 +24,7 @@ export default class AuthorizeOperationBtn extends React.Component {
     return (
       <button className={isAuthorized ? "authorization__btn locked" : "authorization__btn unlocked"} onClick={ this.onClick }>
         <svg width="20" height="20">
-          <use xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
+          <use href={ isAuthorized ? "#locked" : "#unlocked" } xlinkHref={ isAuthorized ? "#locked" : "#unlocked" } />
         </svg>
       </button>
 

src/core/components/models.jsx

@@ -24,7 +24,7 @@ export default class Models extends Component {
     return <section className={ showModels ? "models is-open" : "models"}>
       <h4 onClick={() => layoutActions.show("models", !showModels)}>
         <span>Models</span>
-        <svg className="arrow" width="20" height="20">
+        <svg width="20" height="20">
           <use xlinkHref={showModels ? "#large-arrow-down" : "#large-arrow"} />
         </svg>
       </h4>

src/core/components/operations.jsx

@@ -109,7 +109,7 @@ export default class Operations extends React.Component {
 
                     <button className="expand-operation" title="Expand operation" onClick={() => layoutActions.show(isShownKey, !showTag)}>
                       <svg className="arrow" width="20" height="20">
-                        <use xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
+                        <use href={showTag ? "#large-arrow-down" : "#large-arrow"} xlinkHref={showTag ? "#large-arrow-down" : "#large-arrow"} />
                       </svg>
                     </button>
                   </h4>