feat: replace IonIcons with svg icons (#1069)

app/assets/javascripts/Components/ContentListView/ContentListView.tsx

@@ -21,6 +21,7 @@ import PanelResizer, { PanelSide, ResizeFinishCallback, PanelResizeType } from '
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
 import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
 import ContentListOptionsMenu from './ContentListOptionsMenu'
+import Icon from '@/Components/Icon/Icon'
 
 type Props = {
   application: WebApplication
@@ -174,14 +175,12 @@ const ContentListView: FunctionComponent<Props> = ({ application, viewController
             <div className="section-title-bar-header">
               <div className="sk-h2 font-semibold title">{panelTitle}</div>
               <button
-                className="sk-button contrast wide"
+                className="flex items-center px-5 py-1 bg-contrast hover:brightness-130 color-text border-0 cursor-pointer"
                 title={addButtonLabel}
                 aria-label={addButtonLabel}
                 onClick={addNewItem}
               >
-                <div className="sk-label">
-                  <i className="ion-plus add-button" aria-hidden></i>
-                </div>
+                <Icon type="add" className="w-3.5 h-3.5" />
               </button>
             </div>
             <div className="filter-section" role="search">

app/assets/javascripts/Components/Footer/Footer.tsx

@@ -440,11 +440,9 @@ class Footer extends PureComponent<Props, State> {
                   id="lock-item"
                   onClick={this.lockClickHandler}
                   title="Locks application and wipes unencrypted data from memory."
-                  className="sk-app-bar-item"
+                  className="sk-app-bar-item pl-1 hover:color-info"
                 >
-                  <div className="sk-label">
-                    <i id="footer-lock-icon" className="icon ion-locked" />
-                  </div>
+                  <Icon type="lock-filled" />
                 </div>
               </Fragment>
             )}

app/assets/stylesheets/_ionicons.scss

@@ -1,57 +0,0 @@
-@charset "UTF-8";
-
-/*!
-  Ionicons, v2.0.1
-  Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
-  https://twitter.com/benjsperry  https://twitter.com/ionicframework
-  MIT License: https://github.com/driftyco/ionicons
-
-  Android-style icons originally built by Google’s
-  Material Design Icons: https://github.com/google/material-design-icons
-  used under CC BY http://creativecommons.org/licenses/by/4.0/
-  Modified icons to fit ionicon’s grid from original.
-*/
-@font-face {
-  font-family: 'Ionicons';
-  src: url('../fonts/ionicons.eot?v=2.0.0');
-  src: url('../fonts/ionicons.eot?v=2.0.1#iefix') format('embedded-opentype'),
-    url('../fonts/ionicons.ttf?v=2.0.1') format('truetype'),
-    url('../fonts/ionicons.woff?v=2.0.1') format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-.ionicon-fill-none {
-  fill: none;
-}
-.ionicon-stroke-width {
-  stroke-width: 32px;
-}
-
-.ion,
-.ionicons,
-.ion-locked:before,
-.ion-plus:before {
-  display: inline-block;
-  font-family: 'Ionicons';
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  text-rendering: auto;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.ion-locked:before {
-  content: '\f200';
-}
-
-.ion-plus:before {
-  content: '\f218';
-}
-
-/*# sourceMappingURL=ionicons.css.map */

app/assets/stylesheets/index.css.scss

@@ -9,7 +9,6 @@
 @import 'menus';
 @import 'modals';
 @import 'stylekit-sub';
-@import 'ionicons';
 @import 'reach-sub';
 @import 'sessions-modal';
 @import 'preferences';

app/assets/stylesheets/utils/_height.scss

@@ -2,6 +2,10 @@
   height: 0.75rem;
 }
 
+.h-3\.5 {
+  height: 0.875rem;
+}
+
 .h-26 {
   width: 6.5rem;
 }

app/assets/stylesheets/utils/_padding.scss

@@ -112,8 +112,13 @@
 
 .px-4\.5,
 .sk-panel .px-4\.5 {
-  padding-left: 1.375rem;
-  padding-right: 1.375rem;
+  padding-left: 1.125rem;
+  padding-right: 1.125rem;
+}
+
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
 }
 
 .px-9 {

app/assets/stylesheets/utils/_width.scss

@@ -2,6 +2,10 @@
   width: 0.75rem;
 }
 
+.w-3\.5 {
+  width: 0.875rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }