Rename frontend icon component (#982)

frontend/components/Pagination/Pagination.jsx

@@ -2,7 +2,7 @@ import React, { PureComponent } from "react";
 import PropTypes from "prop-types";
 
 import Button from "components/buttons/Button";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 
 const baseClass = "pagination";
 
@@ -37,14 +37,14 @@ class Pagination extends PureComponent {
           disabled={this.disablePrev()}
           onClick={() => onPaginationChange(currentPage - 1)}
         >
-          <KolideIcon name="chevronleft" /> Prev
+          <FleetIcon name="chevronleft" /> Prev
         </Button>
         <Button
           variant="unstyled"
           disabled={this.disableNext()}
           onClick={() => onPaginationChange(currentPage + 1)}
         >
-          Next <KolideIcon name="chevronright" />
+          Next <FleetIcon name="chevronright" />
         </Button>
       </div>
     );

frontend/components/Pagination/_style.scss

@@ -11,11 +11,11 @@
       color: $core-vibrant-blue;
       padding: 6px;
 
-      .kolidecon-chevronleft {
+      .fleeticon-chevronleft {
         margin-right: $pad-small;
       }
 
-      .kolidecon-chevronright {
+      .fleeticon-chevronright {
         margin-left: $pad-small;
       }
     }

frontend/components/StackedWhiteBoxes/StackedWhiteBoxes.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import { Link } from "react-router";
 import classnames from "classnames";
 
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 
 const baseClass = "stacked-white-boxes";
 
@@ -80,7 +80,7 @@ class StackedWhiteBoxes extends Component {
           className={`${baseClass}__back-link`}
           onClick={nowLeaving}
         >
-          <KolideIcon name="x" />
+          <FleetIcon name="x" />
         </Link>
       </div>
     );

frontend/components/TableContainer/_styles.scss

@@ -50,7 +50,7 @@
       width: 100%;
     }
 
-    .kolidecon {
+    .fleeticon {
       position: absolute;
       top: 10px;
       left: 12px;

frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx

@@ -5,7 +5,7 @@ import FileSaver from "file-saver";
 import Button from "components/buttons/Button";
 import enrollSecretInterface from "interfaces/enroll_secret";
 import InputField from "components/forms/fields/InputField";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import { stringToClipboard } from "utilities/copy_text";
 import EyeIcon from "../../../../assets/images/icon-eye-16x16@2x.png";
 import DownloadIcon from "../../../../assets/images/icon-download-12x12@2x.png";
@@ -72,7 +72,7 @@ class EnrollSecretRow extends Component {
             className={`${baseClass}__secret-copy-icon`}
             onClick={onCopySecret}
           >
-            <KolideIcon name="clipboard" />
+            <FleetIcon name="clipboard" />
           </Button>
           <a
             href="#showSecret"

frontend/components/flash_messages/FlashMessage/FlashMessage.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 
 import notificationInterface from "interfaces/notification";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import Button from "components/buttons/Button";
 
 const baseClass = "flash-message";
@@ -29,7 +29,7 @@ const FlashMessage = ({
   return (
     <div className={klass}>
       <div className={`${baseClass}__content`}>
-        <KolideIcon name={alertIcon} /> <span>{message}</span>
+        <FleetIcon name={alertIcon} /> <span>{message}</span>
         {undoAction && (
           <Button
             className={`${baseClass}__undo`}
@@ -46,7 +46,7 @@ const FlashMessage = ({
           variant="unstyled"
           onClick={onRemoveFlash}
         >
-          <KolideIcon name="x" />
+          <FleetIcon name="x" />
         </Button>
       </div>
     </div>

frontend/components/flash_messages/FlashMessage/_styles.scss

@@ -25,13 +25,13 @@
   }
 
   &--success {
-    .kolidecon {
+    .fleeticon {
       color: $ui-success;
     }
   }
 
   &--error {
-    .kolidecon {
+    .fleeticon {
       color: $ui-error;
     }
   }
@@ -45,7 +45,7 @@
       margin-right: 15px;
     }
 
-    .kolidecon {
+    .fleeticon {
       font-size: $large;
     }
   }
@@ -64,7 +64,7 @@
     text-align: center;
     margin-left: 15px;
 
-    .kolidecon {
+    .fleeticon {
       transition: color 150ms ease-in-out;
       color: $core-fleet-blue;
       font-size: $large;

frontend/components/flash_messages/PersistentFlash/PersistentFlash.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 
 const baseClass = "persistent-flash";
 
@@ -12,7 +12,7 @@ const PersistentFlash = ({ message }) => {
   return (
     <div className={klass}>
       <div className={`${baseClass}__content`}>
-        <KolideIcon name="warning-filled" /> <span>{message}</span>
+        <FleetIcon name="warning-filled" /> <span>{message}</span>
       </div>
     </div>
   );

frontend/components/forms/ConfigurePackQueryForm/_styles.scss

@@ -28,7 +28,7 @@
   }
 
   &__fields {
-    .kolidecon {
+    .fleeticon {
       margin-right: 6px;
       margin-left: 6px;
     }

frontend/components/forms/fields/InputFieldWithIcon/InputFieldWithIcon.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import InputField from "../InputField";
 
 const baseClass = "input-icon-field";
@@ -90,7 +90,7 @@ class InputFieldWithIcon extends InputField {
           type={type}
           value={value}
         />
-        {iconName && <KolideIcon name={iconName} className={iconClasses} />}
+        {iconName && <FleetIcon name={iconName} className={iconClasses} />}
         {renderHint()}
       </div>
     );

frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.jsx

@@ -5,7 +5,7 @@ import AceEditor from "react-ace";
 import classnames from "classnames";
 
 import { humanHostMemory } from "fleet/helpers";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import PlatformIcon from "components/icons/PlatformIcon";
 import targetInterface from "interfaces/target";
 
@@ -66,23 +66,23 @@ class TargetDetails extends Component {
           className={`button button--unstyled ${hostBaseClass}__back`}
           onClick={handleBackToResults}
         >
-          <KolideIcon name="chevronleft" />
+          <FleetIcon name="chevronleft" />
           Back
         </button>
 
         <p className={`${hostBaseClass}__display-text`}>
-          <KolideIcon name="single-host" className={`${hostBaseClass}__icon`} />
+          <FleetIcon name="single-host" className={`${hostBaseClass}__icon`} />
           <span>{displayText}</span>
         </p>
         <p className={statusClassName}>
           {isOnline && (
-            <KolideIcon
+            <FleetIcon
               name="success-check"
               className={`${hostBaseClass}__icon ${hostBaseClass}__icon--online`}
             />
           )}
           {isOffline && (
-            <KolideIcon
+            <FleetIcon
               name="offline"
               className={`${hostBaseClass}__icon ${hostBaseClass}__icon--offline`}
             />
@@ -150,11 +150,11 @@ class TargetDetails extends Component {
           className={`button button--unstyled ${labelBaseClass}__back`}
           onClick={handleBackToResults}
         >
-          <KolideIcon name="chevronleft" /> Back
+          <FleetIcon name="chevronleft" /> Back
         </button>
 
         <p className={`${labelBaseClass}__display-text`}>
-          <KolideIcon name="label" fw className={`${labelBaseClass}__icon`} />
+          <FleetIcon name="label" fw className={`${labelBaseClass}__icon`} />
           <span>{displayText}</span>
         </p>
 

frontend/components/forms/fields/SelectTargetsDropdown/TargetDetails/TargetDetails.tests.jsx

@@ -48,9 +48,9 @@ describe("TargetDetails - component", () => {
       it("renders a success check icon when the target is online", () => {
         const target = { ...Test.Stubs.hostStub, status: "online" };
         const Component = mount(<TargetDetails target={target} />);
-        const KolideIcon = Component.find("KolideIcon");
+        const FleetIcon = Component.find("FleetIcon");
-        const onlineIcon = KolideIcon.find(".host-target__icon--online");
+        const onlineIcon = FleetIcon.find(".host-target__icon--online");
-        const offlineIcon = KolideIcon.find(".host-target__icon--offline");
+        const offlineIcon = FleetIcon.find(".host-target__icon--offline");
 
         expect(onlineIcon.length).toBeGreaterThan(
           0,
@@ -65,9 +65,9 @@ describe("TargetDetails - component", () => {
       it("renders a offline icon when the target is offline", () => {
         const target = { ...Test.Stubs.hostStub, status: "offline" };
         const Component = mount(<TargetDetails target={target} />);
-        const KolideIcon = Component.find("KolideIcon");
+        const FleetIcon = Component.find("FleetIcon");
-        const onlineIcon = KolideIcon.find(".host-target__icon--online");
+        const onlineIcon = FleetIcon.find(".host-target__icon--online");
-        const offlineIcon = KolideIcon.find(".host-target__icon--offline");
+        const offlineIcon = FleetIcon.find(".host-target__icon--offline");
 
         expect(onlineIcon.length).toEqual(
           0,

frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetIcon.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import targetInterface from "interfaces/target";
 
 const baseClass = "target-option";
@@ -24,7 +24,7 @@ const TargetIcon = ({ target }) => {
     `${baseClass}__icon--${status}`
   );
 
-  return <KolideIcon name={iconName()} className={targetClasses} />;
+  return <FleetIcon name={iconName()} className={targetClasses} />;
 };
 
 TargetIcon.propTypes = { target: targetInterface.isRequired };

frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.tests.jsx

@@ -23,7 +23,7 @@ describe("TargetOption - component", () => {
       />
     );
     expect(component.find(".is-host").length).toEqual(1);
-    expect(component.find("i.kolidecon-windows").length).toEqual(1);
+    expect(component.find("i.fleeticon-windows").length).toEqual(1);
     expect(component.text()).toContain(hostStub.primary_ip);
   });
 

frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss

@@ -135,7 +135,7 @@
       position: relative;
 
       &::after {
-        @extend %kolidecon;
+        @extend %fleeticon;
         content: "\f03c";
         font-size: 150px;
         position: absolute;

frontend/components/icons/FleetIcon/FleetIcon.jsx

@@ -2,9 +2,9 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
-const baseClass = "kolidecon";
+const baseClass = "fleeticon";
 
-export class KolideIcon extends Component {
+export class FleetIcon extends Component {
   static propTypes = {
     className: PropTypes.string,
     fw: PropTypes.bool,
@@ -29,4 +29,4 @@ export class KolideIcon extends Component {
   }
 }
 
-export default KolideIcon;
+export default FleetIcon;

frontend/components/icons/FleetIcon/FleetIcon.tests.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { mount } from "enzyme";
+
+import FleetIcon from "./FleetIcon";
+
+describe("FleetIcon - component", () => {
+  it("renders", () => {
+    expect(mount(<FleetIcon name="success-check" />)).toBeTruthy();
+  });
+});

frontend/components/icons/FleetIcon/index.js

@@ -0,0 +1 @@
+export { default } from "./FleetIcon";

frontend/components/icons/KolideIcon/KolideIcon.tests.jsx

@@ -1,10 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-
-import KolideIcon from "./KolideIcon";
-
-describe("KolideIcon - component", () => {
-  it("renders", () => {
-    expect(mount(<KolideIcon name="success-check" />)).toBeTruthy();
-  });
-});

frontend/components/icons/KolideIcon/index.js

@@ -1 +0,0 @@
-export { default } from "./KolideIcon";

frontend/components/icons/PlatformIcon/PlatformIcon.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import platformIconClass from "utilities/platform_icon_class";
 
 const baseClass = "platform-icon";
@@ -26,7 +26,7 @@ export class PlatformIcon extends Component {
     }
 
     return (
-      <KolideIcon
+      <FleetIcon
         className={iconClasses}
         fw={fw}
         name={iconName}

frontend/components/icons/PlatformIcon/PlatformIcon.tests.jsx

@@ -11,6 +11,6 @@ describe("PlatformIcon - component", () => {
   it("renders text if no icon", () => {
     const component = mount(<PlatformIcon name="All" />);
 
-    expect(component.find(".kolidecon-single-host").length).toEqual(1);
+    expect(component.find(".fleeticon-single-host").length).toEqual(1);
   });
 });

frontend/components/packs/EditPackFormWrapper/_styles.scss

@@ -6,7 +6,7 @@
   &__title {
     @include ellipsis(80%);
 
-    .kolidecon {
+    .fleeticon {
       color: $ui-gray;
     }
   }

frontend/components/queries/QueryResultsTable/QueryResultsTable.jsx

@@ -6,7 +6,7 @@ import { keys, omit } from "lodash";
 import Button from "components/buttons/Button";
 import campaignInterface from "interfaces/campaign";
 import filterArrayByHash from "utilities/filter_array_by_hash";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import InputField from "components/forms/fields/InputField";
 import QueryResultsRow from "components/queries/QueryResultsTable/QueryResultsRow";
 import QueryProgressDetails from "components/queries/QueryProgressDetails";
@@ -68,7 +68,7 @@ class QueryResultsTable extends Component {
     return (
       <th key={`query-results-table-header-${index}`}>
         <span>
-          <KolideIcon className={filterIconClassName} name="filter" />
+          <FleetIcon className={filterIconClassName} name="filter" />
           {column}
         </span>
         <InputField
@@ -202,7 +202,7 @@ class QueryResultsTable extends Component {
             onClick={onToggleQueryFullScreen}
             variant="grey"
           >
-            <KolideIcon name={isQueryFullScreen ? "windowed" : "fullscreen"} />
+            <FleetIcon name={isQueryFullScreen ? "windowed" : "fullscreen"} />
           </Button>
           {!hasNoResults && !queryIsRunning && (
             <Button

frontend/components/queries/QueryResultsTable/_styles.scss

@@ -96,7 +96,7 @@
       span {
         white-space: nowrap;
 
-        .kolidecon {
+        .fleeticon {
           margin-right: 5px;
         }
       }

frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.jsx

@@ -4,7 +4,7 @@ import classnames from "classnames";
 import { includes, sortBy, size } from "lodash";
 
 import queryInterface from "interfaces/query";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import QueriesListItem from "components/queries/ScheduledQueriesList/ScheduledQueriesListItem";
 import Checkbox from "components/forms/fields/Checkbox";
 
@@ -108,20 +108,19 @@ class ScheduledQueriesList extends Component {
             <ul>
               <li>
                 <strong>
-                  <KolideIcon name="plus-minus" /> Differential:
+                  <FleetIcon name="plus-minus" /> Differential:
                 </strong>{" "}
                 show only what’s added from last run
               </li>
               <li>
                 <strong>
-                  <KolideIcon name="bold-plus" /> Differential (ignore
+                  <FleetIcon name="bold-plus" /> Differential (ignore removals):
-                  removals):
                 </strong>{" "}
                 show only what’s been added since the last run
               </li>
               <li>
                 <strong>
-                  <KolideIcon name="camera" /> Snapshot:
+                  <FleetIcon name="camera" /> Snapshot:
                 </strong>{" "}
                 show everything in its current state
               </li>

frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.jsx

@@ -4,7 +4,7 @@ import classnames from "classnames";
 
 import Checkbox from "components/forms/fields/Checkbox";
 import ClickableTableRow from "components/ClickableTableRow";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import { isEqual, find } from "lodash";
 import scheduledQueryInterface from "interfaces/scheduled_query";
 
@@ -130,7 +130,7 @@ class ScheduledQueriesListItem extends Component {
         <td>{version ? `${version}+` : "Any"}</td>
         <td>{shard}</td>
         <td>
-          <KolideIcon name={loggingTypeString()} />
+          <FleetIcon name={loggingTypeString()} />
         </td>
       </ClickableTableRow>
     );

frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/ScheduledQueriesListItem.tests.jsx

@@ -114,33 +114,33 @@ describe("ScheduledQueriesListItem - component", () => {
     const props = { ...defaultProps, scheduledQuery: query };
     let component = shallow(<ScheduledQueriesListItem {...props} />);
 
-    expect(component.find("KolideIcon").last().props().name).toEqual("camera");
+    expect(component.find("FleetIcon").last().props().name).toEqual("camera");
 
     query.snapshot = false;
     query.removed = false;
     component = shallow(<ScheduledQueriesListItem {...props} />);
-    expect(component.find("KolideIcon").last().props().name).toEqual(
+    expect(component.find("FleetIcon").last().props().name).toEqual(
       "bold-plus"
     );
 
     query.snapshot = false;
     query.removed = null;
     component = shallow(<ScheduledQueriesListItem {...props} />);
-    expect(component.find("KolideIcon").last().props().name).toEqual(
+    expect(component.find("FleetIcon").last().props().name).toEqual(
       "plus-minus"
     );
 
     query.snapshot = false;
     query.removed = true;
     component = shallow(<ScheduledQueriesListItem {...props} />);
-    expect(component.find("KolideIcon").last().props().name).toEqual(
+    expect(component.find("FleetIcon").last().props().name).toEqual(
       "plus-minus"
     );
 
     query.snapshot = null;
     query.removed = true;
     component = shallow(<ScheduledQueriesListItem {...props} />);
-    expect(component.find("KolideIcon").last().props().name).toEqual(
+    expect(component.find("FleetIcon").last().props().name).toEqual(
       "plus-minus"
     );
   });

frontend/components/queries/ScheduledQueriesList/_styles.scss

@@ -108,7 +108,7 @@
           text-align: left;
           color: $core-fleet-black;
 
-          .kolidecon {
+          .fleeticon {
             font-size: 18px;
           }
         }

frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss

@@ -6,7 +6,7 @@
     margin: 0;
     font-size: $small;
 
-    .kolidecon {
+    .fleeticon {
       color: $core-fleet-blue;
       margin-right: 6px;
     }

frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx

@@ -6,7 +6,7 @@ import IconToolTip from "components/IconToolTip";
 import osqueryTableInterface from "interfaces/osquery_table";
 import { osqueryTableNames } from "utilities/osquery_tables";
 import Dropdown from "components/forms/fields/Dropdown";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import SecondarySidePanelContainer from "../SecondarySidePanelContainer";
 
 import displayTypeForDataType from "./helpers";
@@ -103,13 +103,13 @@ class QuerySidePanel extends Component {
               if (platform === "all") {
                 return (
                   <li key={platform}>
-                    <KolideIcon name="hosts" /> {platform}
+                    <FleetIcon name="hosts" /> {platform}
                   </li>
                 );
               } else if (platform === "freebsd") {
                 return (
                   <li key={platform}>
-                    <KolideIcon name="single-host" /> {platform}
+                    <FleetIcon name="single-host" /> {platform}
                   </li>
                 );
               }

frontend/components/side_panels/QuerySidePanel/_styles.scss

@@ -34,7 +34,7 @@
     margin: 0 0 $pad-large;
     padding: 0;
 
-    .kolidecon {
+    .fleeticon {
       font-size: 18px;
       margin-right: $pad-medium;
     }

frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import AceEditor from "react-ace";
 import { isEqual, sortBy } from "lodash";
 
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import queryInterface from "interfaces/query";
 import Dropdown from "components/forms/fields/Dropdown";
 
@@ -59,7 +59,7 @@ class SearchPackQuery extends Component {
     if (selectedQuery) {
       return (
         <h1 className={`${baseClass}__title`}>
-          <KolideIcon name="query" /> {selectedQuery.name}
+          <FleetIcon name="query" /> {selectedQuery.name}
         </h1>
       );
     }

frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss

@@ -33,7 +33,7 @@
     }
 
     &::after {
-      @extend %kolidecon;
+      @extend %fleeticon;
       @include size(24px);
       background-color: transparent;
       display: block;

frontend/pages/UserSettingsPage/UserSettingsPage.jsx

@@ -17,7 +17,7 @@ import Button from "components/buttons/Button";
 import ChangeEmailForm from "components/forms/ChangeEmailForm";
 import ChangePasswordForm from "components/forms/ChangePasswordForm";
 import deepDifference from "utilities/deep_difference";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import InputField from "components/forms/fields/InputField";
 import { logoutUser, updateUser } from "redux/nodes/auth/actions";
 import Modal from "components/modals/Modal";
@@ -278,7 +278,7 @@ export class UserSettingsPage extends Component {
             className={`${baseClass}__secret-copy-icon`}
             onClick={onCopySecret(`.${baseClass}__secret-input`)}
           >
-            <KolideIcon name="clipboard" />
+            <FleetIcon name="clipboard" />
           </Button>
         </div>
         <div className={`${baseClass}__button-wrap`}>

frontend/pages/UserSettingsPage/_styles.scss

@@ -64,7 +64,7 @@
   &__more-info-detail {
     color: $core-fleet-black;
 
-    .kolidecon {
+    .fleeticon {
       color: $ui-gray;
       font-size: 18px;
       margin-right: 11px;

frontend/pages/admin/AppSettingsPage/_styles.scss

@@ -19,7 +19,7 @@
       text-decoration: none;
     }
 
-    .kolidecon {
+    .fleeticon {
       font-size: 8px;
       margin: 0 20px;
       vertical-align: 4px;

frontend/pages/hosts/HostDetailsPage/SelectQueryModal/_styles.scss

@@ -80,7 +80,7 @@
       padding-left: 44px;
     }
 
-    .kolidecon {
+    .fleeticon {
       position: absolute;
       top: 10px;
       left: 10px;

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -22,20 +22,20 @@
   &__title {
     font-size: $large;
 
-    .kolidecon {
+    .fleeticon {
       color: $core-fleet-blue;
       margin-right: 15px;
     }
 
-    .kolidecon-success-check {
+    .fleeticon-success-check {
       color: $ui-success;
     }
 
-    .kolidecon-offline {
+    .fleeticon-offline {
       color: $ui-error;
     }
 
-    .kolidecon-mia {
+    .fleeticon-mia {
       color: $core-fleet-black;
     }
   }
@@ -67,7 +67,7 @@
   }
 
   &__toggle-view {
-    .kolidecon {
+    .fleeticon {
       width: 24px;
       height: 24px;
       margin-left: 12px;
@@ -75,7 +75,7 @@
     }
 
     &--active {
-      .kolidecon {
+      .fleeticon {
         fill: $core-fleet-purple;
       }
     }

frontend/pages/hosts/ManageHostsPage/components/AddHostModal/AddHostModal.jsx

@@ -9,7 +9,7 @@ import teamInterface from "interfaces/team";
 import enrollSecretInterface from "interfaces/enroll_secret";
 import permissionUtils from "utilities/permissions";
 import EnrollSecretTable from "components/config/EnrollSecretTable";
-import KolideIcon from "components/icons/KolideIcon";
+import FleetIcon from "components/icons/FleetIcon";
 import Dropdown from "components/forms/fields/Dropdown";
 import DownloadIcon from "../../../../../../assets/images/icon-download-12x12@2x.png";
 
@@ -157,7 +157,7 @@ class AddHostModal extends Component {
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                Add Hosts Documentation <KolideIcon name="external-link" />
+                Add Hosts Documentation <FleetIcon name="external-link" />
               </a>
             </h4>
           </div>

frontend/pages/hosts/ManageHostsPage/components/AddHostModal/_styles.scss

@@ -21,7 +21,7 @@
       margin: 0;
     }
 
-    .kolidecon {
+    .fleeticon {
       float: left;
       font-size: 44px;
       color: #48c586;
@@ -35,7 +35,7 @@
       font-weight: $bold;
       margin: $pad-xlarge 0 0;
 
-      .kolidecon {
+      .fleeticon {
         margin-left: 5px;
         font-size: 18px;
       }

frontend/styles/global/_fonts.scss

@@ -36,9 +36,9 @@
 }
 
 @font-face {
-  font-family: "kolidecons";
+  font-family: "fleeticons";
-  src: url("../assets/fonts/kolidecons/kolidecons.woff2") format("woff2"),
+  src: url("../assets/fonts/fleeticons/fleeticons.woff2") format("woff2"),
-    url("../assets/fonts/kolidecons/kolidecons.woff") format("woff");
+    url("../assets/fonts/fleeticons/fleeticons.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }

frontend/styles/global/_icons.scss

@@ -1,378 +1,378 @@
-%kolidecon {
+%fleeticon {
   display: inline-block;
-  font: normal normal normal 14px/1 "kolidecons";
+  font: normal normal normal 14px/1 "fleeticons";
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-[class^="kolidecon-"],
+[class^="fleeticon-"],
-[class*=" kolidecon-"],
+[class*=" fleeticon-"],
-.kolidecon {
+.fleeticon {
-  @extend %kolidecon;
+  @extend %fleeticon;
 }
 
-.kolidecon-lg {
+.fleeticon-lg {
   font-size: 1.33333333em;
   line-height: 0.75em;
   vertical-align: -15%;
 }
 
-.kolidecon-2x {
+.fleeticon-2x {
   font-size: 2em;
 }
 
-.kolidecon-3x {
+.fleeticon-3x {
   font-size: 3em;
 }
 
-.kolidecon-4x {
+.fleeticon-4x {
   font-size: 4em;
 }
 
-.kolidecon-5x {
+.fleeticon-5x {
   font-size: 5em;
 }
 
-.kolidecon-fw {
+.fleeticon-fw {
   width: 1.28571429em;
   text-align: center;
 }
 
-.kolidecon-kolide-logo-flat:before {
+.fleeticon-kolide-logo-flat:before {
   content: "\f000";
 }
 
-.kolidecon-chevrondown:before {
+.fleeticon-chevrondown:before {
   content: "\f004";
 }
 
-.kolidecon-chevronleft:before {
+.fleeticon-chevronleft:before {
   content: "\f006";
 }
 
-.kolidecon-chevronright:before {
+.fleeticon-chevronright:before {
   content: "\f008";
 }
 
-.kolidecon-chevronup:before {
+.fleeticon-chevronup:before {
   content: "\f00a";
 }
 
-.kolidecon-cpu:before {
+.fleeticon-cpu:before {
   content: "\f00c";
 }
 
-.kolidecon-downcarat:before {
+.fleeticon-downcarat:before {
   content: "\f00d";
 }
 
-.kolidecon-filter:before {
+.fleeticon-filter:before {
   content: "\f00f";
 }
 
-.kolidecon-mac:before {
+.fleeticon-mac:before {
   content: "\f012";
 }
 
-.kolidecon-memory:before {
+.fleeticon-memory:before {
   content: "\f013";
 }
 
-.kolidecon-storage:before {
+.fleeticon-storage:before {
   content: "\f019";
 }
 
-.kolidecon-upcarat:before {
+.fleeticon-upcarat:before {
   content: "\f01b";
 }
 
-.kolidecon-uptime:before {
+.fleeticon-uptime:before {
   content: "\f01c";
 }
 
-.kolidecon-world:before {
+.fleeticon-world:before {
   content: "\f01d";
 }
 
-.kolidecon-osquery:before {
+.fleeticon-osquery:before {
   content: "\f021";
 }
 
-.kolidecon-join:before {
+.fleeticon-join:before {
   content: "\f022";
 }
 
-.kolidecon-add-button:before {
+.fleeticon-add-button:before {
   content: "\f029";
 }
 
-.kolidecon-packs:before {
+.fleeticon-packs:before {
   content: "\f02f";
 }
 
-.kolidecon-help:before {
+.fleeticon-help:before {
   content: "\f030";
 }
 
-.kolidecon-admin:before {
+.fleeticon-admin:before {
   content: "\f031";
 }
 
-.kolidecon-config:before {
+.fleeticon-config:before {
   content: "\f032";
 }
 
-.kolidecon-mia:before {
+.fleeticon-mia:before {
   content: "\f034";
 }
 
-.kolidecon-success-check:before {
+.fleeticon-success-check:before {
   content: "\f035";
 }
 
-.kolidecon-offline:before {
+.fleeticon-offline:before {
   content: "\f036";
 }
 
-.kolidecon-windows-original:before {
+.fleeticon-windows-original:before {
   content: "\f037";
 }
 
-.kolidecon-centos-original:before {
+.fleeticon-centos-original:before {
   content: "\f038";
 }
 
-.kolidecon-ubuntu-original:before {
+.fleeticon-ubuntu-original:before {
   content: "\f039";
 }
 
-.kolidecon-apple-original:before {
+.fleeticon-apple-original:before {
   content: "\f03a";
 }
 
-.kolidecon-search:before {
+.fleeticon-search:before {
   content: "\f03b";
 }
 
-.kolidecon-all-hosts:before {
+.fleeticon-all-hosts:before {
   content: "\f03c";
 }
 
-.kolidecon-alerts:before {
+.fleeticon-alerts:before {
   content: "\f03e";
 }
 
-.kolidecon-logout:before {
+.fleeticon-logout:before {
   content: "\f03f";
 }
 
-.kolidecon-user-settings:before {
+.fleeticon-user-settings:before {
   content: "\f040";
 }
 
-.kolidecon-clipboard:before {
+.fleeticon-clipboard:before {
   content: "\f043";
 }
 
-.kolidecon-list-select:before {
+.fleeticon-list-select:before {
   content: "\f044";
 }
 
-.kolidecon-grid-select:before {
+.fleeticon-grid-select:before {
   content: "\f045";
 }
 
-.kolidecon-label:before {
+.fleeticon-label:before {
   content: "\f033";
 }
 
-.kolidecon-docker:before {
+.fleeticon-docker:before {
   content: "\f046";
 }
 
-.kolidecon-cloud:before {
+.fleeticon-cloud:before {
   content: "\f047";
 }
 
-.kolidecon-self-hosted:before {
+.fleeticon-self-hosted:before {
   content: "\f048";
 }
 
-.kolidecon-help-solid:before {
+.fleeticon-help-solid:before {
   content: "\f049";
 }
 
-.kolidecon-help-stroke:before {
+.fleeticon-help-stroke:before {
   content: "\f04a";
 }
 
-.kolidecon-warning-filled:before {
+.fleeticon-warning-filled:before {
   content: "\f04b";
 }
 
-.kolidecon-delete-cloud:before {
+.fleeticon-delete-cloud:before {
   content: "\f04c";
 }
 
-.kolidecon-pdf:before {
+.fleeticon-pdf:before {
   content: "\f04d";
 }
 
-.kolidecon-credit-card-small:before {
+.fleeticon-credit-card-small:before {
   content: "\f04e";
 }
 
-.kolidecon-billing-card:before {
+.fleeticon-billing-card:before {
   content: "\f04f";
 }
 
-.kolidecon-lock-big:before {
+.fleeticon-lock-big:before {
   content: "\f050";
 }
 
-.kolidecon-link-big:before {
+.fleeticon-link-big:before {
   content: "\f051";
 }
 
-.kolidecon-briefcase:before {
+.fleeticon-briefcase:before {
   content: "\f052";
 }
 
-.kolidecon-name-card:before {
+.fleeticon-name-card:before {
   content: "\f053";
 }
 
-.kolidecon-kolide-logo:before {
+.fleeticon-kolide-logo:before {
   content: "\f054";
 }
 
-.kolidecon-business:before {
+.fleeticon-business:before {
   content: "\f055";
 }
 
-.kolidecon-clock:before {
+.fleeticon-clock:before {
   content: "\f056";
 }
 
-.kolidecon-host-large:before {
+.fleeticon-host-large:before {
   content: "\f057";
 }
 
-.kolidecon-single-host:before {
+.fleeticon-single-host:before {
   content: "\f03d";
 }
 
-.kolidecon-username:before {
+.fleeticon-username:before {
   content: "\f02a";
 }
 
-.kolidecon-password:before {
+.fleeticon-password:before {
   content: "\f02b";
 }
 
-.kolidecon-email:before {
+.fleeticon-email:before {
   content: "\f02c";
 }
 
-.kolidecon-hosts:before {
+.fleeticon-hosts:before {
   content: "\f02e";
 }
 
-.kolidecon-query:before {
+.fleeticon-query:before {
   content: "\f02d";
 }
 
-.kolidecon-import:before {
+.fleeticon-import:before {
   content: "\f058";
 }
 
-.kolidecon-pencil:before {
+.fleeticon-pencil:before {
   content: "\f059";
 }
 
-.kolidecon-add-plus:before {
+.fleeticon-add-plus:before {
   content: "\f05a";
 }
 
-.kolidecon-x:before {
+.fleeticon-x:before {
   content: "\f05b";
 }
 
-.kolidecon-kill-kolide:before {
+.fleeticon-kill-kolide:before {
   content: "\f05c";
 }
 
-.kolidecon-right-arrow:before {
+.fleeticon-right-arrow:before {
   content: "\f05d";
 }
 
-.kolidecon-camera:before {
+.fleeticon-camera:before {
   content: "\f05e";
 }
 
-.kolidecon-plus-minus:before {
+.fleeticon-plus-minus:before {
   content: "\f05f";
 }
 
-.kolidecon-bold-plus:before {
+.fleeticon-bold-plus:before {
   content: "\f060";
 }
 
-.kolidecon-linux-original:before {
+.fleeticon-linux-original:before {
   content: "\f061";
 }
 
-.kolidecon-clock2:before {
+.fleeticon-clock2:before {
   content: "\f063";
 }
 
-.kolidecon-trash:before {
+.fleeticon-trash:before {
   content: "\f064";
 }
 
-.kolidecon-laptop-plus:before {
+.fleeticon-laptop-plus:before {
   content: "\f066";
 }
 
-.kolidecon-wrench-hand:before {
+.fleeticon-wrench-hand:before {
   content: "\f067";
 }
 
-.kolidecon-external-link:before {
+.fleeticon-external-link:before {
   content: "\f068";
 }
 
-.kolidecon-fullscreen:before {
+.fleeticon-fullscreen:before {
   content: "\f069";
 }
 
-.kolidecon-windowed:before {
+.fleeticon-windowed:before {
   content: "\f06a";
 }
 
-.kolidecon-heroku:before {
+.fleeticon-heroku:before {
   content: "\f06b";
 }
 
-.kolidecon-ubuntu:before {
+.fleeticon-ubuntu:before {
   content: "\f06c";
 }
 
-.kolidecon-windows:before {
+.fleeticon-windows:before {
   content: "\f06d";
 }
 
-.kolidecon-centos:before {
+.fleeticon-centos:before {
   content: "\f06e";
 }
 
-.kolidecon-apple:before {
+.fleeticon-apple:before {
   content: "\f06f";
 }
 
-.kolidecon-linux:before {
+.fleeticon-linux:before {
   content: "\f070";
 }