@woosmap/ui 4.35.0 → 4.36.0

package/src/components/Icon/Icon.js

@@ -113,103 +113,66 @@ import { ReactComponent as WorldTime } from '../../icons/world-time.svg';
 import { ReactComponent as WinPrize } from '../../icons/win-prize.svg';
 import { ReactComponent as Zoom } from '../../icons/zoom.svg';
 
-import { ReactComponent as Access } from '../../icons/access.svg';
 import { ReactComponent as Add } from '../../icons/add.svg';
 import { ReactComponent as AddCircle } from '../../icons/add-circle.svg';
-import { ReactComponent as Administration } from '../../icons/administration.svg';
 import { ReactComponent as AdministrationTool } from '../../icons/administration-tool.svg';
 import { ReactComponent as AdminKey } from '../../icons/admin-key.svg';
 import { ReactComponent as AdminTool } from '../../icons/admin-tool.svg';
 import { ReactComponent as Agenda } from '../../icons/agenda.svg';
 import { ReactComponent as AlphabeticalOrder } from '../../icons/alphabetical-order.svg';
 import { ReactComponent as AlphabeticalOrderReversed } from '../../icons/alphabetical-order-reversed.svg';
-import { ReactComponent as Archive } from '../../icons/archive.svg';
 import { ReactComponent as ArrowBotton } from '../../icons/arrow-bottom.svg';
 import { ReactComponent as ArrowLeft } from '../../icons/arrow-left.svg';
 import { ReactComponent as ArrowRight } from '../../icons/arrow-right.svg';
 import { ReactComponent as ArrowTop } from '../../icons/arrow-top.svg';
-import { ReactComponent as ArrowLink } from '../../icons/arrow-link.svg';
 import { ReactComponent as Asset } from '../../icons/asset.svg';
-import { ReactComponent as AssetAddFile } from '../../icons/asset-add-file.svg';
-import { ReactComponent as AssetAdd } from '../../icons/asset-add.svg';
-import { ReactComponent as Bank } from '../../icons/bank.svg';
-import { ReactComponent as Beaker } from '../../icons/beaker.svg';
-import { ReactComponent as Bell } from '../../icons/bell.svg';
 import { ReactComponent as BigCommerce } from '../../icons/big-commerce.svg';
-import { ReactComponent as Bookmark } from '../../icons/bookmark.svg';
 import { ReactComponent as Bulb } from '../../icons/bulb.svg';
 import { ReactComponent as CaretBotton } from '../../icons/caret-bottom.svg';
 import { ReactComponent as CaretLeft } from '../../icons/caret-left.svg';
 import { ReactComponent as CaretRight } from '../../icons/caret-right.svg';
 import { ReactComponent as CaretTop } from '../../icons/caret-top.svg';
 import { ReactComponent as Charts } from '../../icons/charts.svg';
-import { ReactComponent as Chat } from '../../icons/chat.svg';
 import { ReactComponent as Check } from '../../icons/check.svg';
-import { ReactComponent as Checked } from '../../icons/checked.svg';
-import { ReactComponent as CheckCircle } from '../../icons/check-circle.svg';
-import { ReactComponent as CheckSquare } from '../../icons/check-square.svg';
 import { ReactComponent as Clock } from '../../icons/clock.svg';
 import { ReactComponent as ClockReversed } from '../../icons/clock-reversed.svg';
 import { ReactComponent as Close } from '../../icons/close.svg';
-import { ReactComponent as CloseThick } from '../../icons/close-thick.svg';
 import { ReactComponent as Code } from '../../icons/code.svg';
 import { ReactComponent as Company } from '../../icons/company.svg';
 import { ReactComponent as Copy } from '../../icons/copy.svg';
-import { ReactComponent as CreditCard } from '../../icons/credit-card.svg';
 import { ReactComponent as Cube } from '../../icons/cube.svg';
 import { ReactComponent as Dashboard } from '../../icons/dashboard.svg';
 import { ReactComponent as Delete } from '../../icons/delete.svg';
-import { ReactComponent as Details } from '../../icons/details.svg';
 import { ReactComponent as Documentation } from '../../icons/documentation.svg';
 import { ReactComponent as Dollar } from '../../icons/dollar.svg';
-import { ReactComponent as DotFill } from '../../icons/dot-fill.svg';
 import { ReactComponent as Dot } from '../../icons/dot.svg';
-import { ReactComponent as Download } from '../../icons/download.svg';
+import { ReactComponent as DotFill } from '../../icons/dot-fill.svg';
 import { ReactComponent as Edit } from '../../icons/edit.svg';
 import { ReactComponent as Email } from '../../icons/email.svg';
-import { ReactComponent as Enter } from '../../icons/enter.svg';
 import { ReactComponent as Eye } from '../../icons/eye.svg';
 import { ReactComponent as EyeCrossedOut } from '../../icons/eye-crossed-out.svg';
-import { ReactComponent as Exchange } from '../../icons/exchange.svg';
 import { ReactComponent as Expand } from '../../icons/expand.svg';
 import { ReactComponent as Export } from '../../icons/export.svg';
 import { ReactComponent as Flag } from '../../icons/flag.svg';
 import { ReactComponent as Forbidden } from '../../icons/forbidden.svg';
-
 import { ReactComponent as Globe } from '../../icons/globe.svg';
-import { ReactComponent as Home } from '../../icons/home.svg';
 import { ReactComponent as Hourglass } from '../../icons/hourglass.svg';
-import { ReactComponent as HomeUser } from '../../icons/home-user.svg';
 import { ReactComponent as Import } from '../../icons/import.svg';
 import { ReactComponent as Info } from '../../icons/info.svg';
-import { ReactComponent as Label } from '../../icons/label.svg';
 import { ReactComponent as Latitude } from '../../icons/latitude.svg';
 import { ReactComponent as Load } from '../../icons/load.svg';
-import { ReactComponent as Leave } from '../../icons/leave.svg';
-import { ReactComponent as Location } from '../../icons/location.svg';
 import { ReactComponent as Longitude } from '../../icons/longitude.svg';
 import { ReactComponent as Manage } from '../../icons/manage.svg';
 import { ReactComponent as Marker } from '../../icons/marker.svg';
 import { ReactComponent as Members } from '../../icons/members.svg';
 import { ReactComponent as Member } from '../../icons/member.svg';
 import { ReactComponent as MenuVertical } from '../../icons/menu-vertical.svg';
-import { ReactComponent as MenuCircleVertical } from '../../icons/menu-circle-vertical.svg';
-import { ReactComponent as MenuHorizontal } from '../../icons/menu-horizontal.svg';
-import { ReactComponent as MenuCircleHorizontal } from '../../icons/menu-circle-horizontal.svg';
-import { ReactComponent as Metrics } from '../../icons/metrics.svg';
-import { ReactComponent as More } from '../../icons/more.svg';
-import { ReactComponent as Organization } from '../../icons/organization.svg';
-import { ReactComponent as Organizations } from '../../icons/organizations.svg';
 import { ReactComponent as Phone } from '../../icons/phone.svg';
-import { ReactComponent as Platform } from '../../icons/platform.svg';
-import { ReactComponent as Prize } from '../../icons/prize.svg';
 import { ReactComponent as ProductActivated } from '../../icons/product-activated.svg';
 import { ReactComponent as ProductAdd } from '../../icons/product-add.svg';
 import { ReactComponent as Products } from '../../icons/products.svg';
 import { ReactComponent as Projects } from '../../icons/projects.svg';
-import { ReactComponent as Puzzle } from '../../icons/puzzle.svg';
 import { ReactComponent as Question } from '../../icons/question.svg';
-import { ReactComponent as Receipt } from '../../icons/receipt.svg';
 import { ReactComponent as Search } from '../../icons/search.svg';
 import { ReactComponent as SeePage } from '../../icons/see-page.svg';
 import { ReactComponent as Settings } from '../../icons/settings.svg';
@@ -221,11 +184,9 @@ import { ReactComponent as Support } from '../../icons/support.svg';
 import { ReactComponent as Switch } from '../../icons/switch.svg';
 import { ReactComponent as Team } from '../../icons/team.svg';
 import { ReactComponent as Time } from '../../icons/time.svg';
-import { ReactComponent as Tool } from '../../icons/tool.svg';
 import { ReactComponent as User } from '../../icons/user.svg';
 import { ReactComponent as ViewCard } from '../../icons/view-card.svg';
 import { ReactComponent as ViewList } from '../../icons/view-list.svg';
-import { ReactComponent as ViewMiniCard } from '../../icons/view-mini-card.svg';
 import { ReactComponent as Warning } from '../../icons/warning.svg';
 import { ReactComponent as Woosmap } from '../../icons/woosmap.svg';
 import { ReactComponent as Address } from '../../icons/address.svg';
@@ -233,6 +194,7 @@ import { ReactComponent as Distance } from '../../icons/distance.svg';
 import { ReactComponent as Geolocation } from '../../icons/geolocation.svg';
 import { ReactComponent as Localities } from '../../icons/localities.svg';
 import { ReactComponent as Map } from '../../icons/map.svg';
+
 import { ReactComponent as Merchant } from '../../icons/merchant.svg';
 import { ReactComponent as Stores } from '../../icons/stores.svg';
 import { ReactComponent as Traffic } from '../../icons/traffic.svg';
@@ -245,8 +207,8 @@ import { ReactComponent as Showcases } from '../../icons/showcases.svg';
 import { ReactComponent as Indoor } from '../../icons/indoor.svg';
 
 import { ReactComponent as SocialFacebook } from '../../icons/social-facebook.svg';
-import { ReactComponent as socialGithub } from '../../icons/social-github.svg';
-import { ReactComponent as socialGoogle } from '../../icons/social-google.svg';
+import { ReactComponent as SocialGithub } from '../../icons/social-github.svg';
+import { ReactComponent as SocialGoogle } from '../../icons/social-google.svg';
 import { ReactComponent as SocialLinkedin } from '../../icons/social-linkedin.svg';
 import { ReactComponent as SocialTwitter } from '../../icons/social-twitter.svg';
 
@@ -262,6 +224,7 @@ import { ReactComponent as IndoorAirlineTransfers } from '../../icons/indoor-air
 import { ReactComponent as IndoorAirlinesCounter } from '../../icons/indoor-airlines_counter.svg';
 import { ReactComponent as IndoorAlcohol } from '../../icons/indoor-alcohol.svg';
 import { ReactComponent as IndoorAmenity } from '../../icons/indoor-amenity.svg';
+import { ReactComponent as IndoorArrival } from '../../icons/indoor-arrival.svg';
 import { ReactComponent as IndoorArt } from '../../icons/indoor-art.svg';
 import { ReactComponent as IndoorAssemblyPoint } from '../../icons/indoor-assembly_point.svg';
 import { ReactComponent as IndoorAtm } from '../../icons/indoor-atm.svg';
@@ -286,7 +249,7 @@ import { ReactComponent as IndoorClothes } from '../../icons/indoor-clothes.svg'
 import { ReactComponent as IndoorConvinienceStore } from '../../icons/indoor-convinience_store.svg';
 import { ReactComponent as IndoorCosmetics } from '../../icons/indoor-cosmetics.svg';
 import { ReactComponent as IndoorDefault } from '../../icons/indoor-default.svg';
-import { ReactComponent as IndoorDefibrilator } from '../../icons/indoor-defibrilator.svg';
+import { ReactComponent as IndoorDefibrillator } from '../../icons/indoor-defibrillator.svg';
 import { ReactComponent as IndoorDepartmentStore } from '../../icons/indoor-department_store.svg';
 import { ReactComponent as IndoorDeviceChargingStation } from '../../icons/indoor-device_charging_station.svg';
 import { ReactComponent as IndoorDining } from '../../icons/indoor-dining.svg';
@@ -297,10 +260,10 @@ import { ReactComponent as IndoorDrinkingWater } from '../../icons/indoor-drinki
 import { ReactComponent as IndoorDutyFree } from '../../icons/indoor-duty_free.svg';
 import { ReactComponent as IndoorElectronics } from '../../icons/indoor-electronics.svg';
 import { ReactComponent as IndoorElevator } from '../../icons/indoor-elevator.svg';
-import { ReactComponent as IndoorEmmergencyExit } from '../../icons/indoor-emmergency_exit.svg';
+import { ReactComponent as IndoorExitEmergency } from '../../icons/indoor-exit-emergency.svg';
 import { ReactComponent as IndoorEntertainment } from '../../icons/indoor-entertainment.svg';
 import { ReactComponent as IndoorEntrance } from '../../icons/indoor-entrance.svg';
-import { ReactComponent as IndoorEscalator } from '../../icons/indoor-escalator.svg';
+import { ReactComponent as IndoorConveyingForward } from '../../icons/indoor-escalator.svg';
 import { ReactComponent as IndoorFashionAccessories } from '../../icons/indoor-fashion_accessories.svg';
 import { ReactComponent as IndoorFastFood } from '../../icons/indoor-fast_food.svg';
 import { ReactComponent as IndoorFireExtinguisher } from '../../icons/indoor-fire_extinguisher.svg';
@@ -465,62 +428,42 @@ const WebsiteIcons = {
 };
 
 const ConsoleIcons = {
-    access: Access,
     'add-circle': AddCircle,
     add: Add,
     'admin-key': AdminKey,
     'admin-tool': AdminTool,
     'administration-tool': AdministrationTool,
-    administration: Administration,
     agenda: Agenda,
-    'alphabetical-order-reversed': AlphabeticalOrderReversed,
     'alphabetical-order': AlphabeticalOrder,
-    archive: Archive,
+    'alphabetical-order-reversed': AlphabeticalOrderReversed,
     'arrow-bottom': ArrowBotton,
     'arrow-left': ArrowLeft,
-    'arrow-link': ArrowLink,
     'arrow-right': ArrowRight,
     'arrow-top': ArrowTop,
-    'asset-add-file': AssetAddFile,
-    'asset-add': AssetAdd,
     asset: Asset,
-    bank: Bank,
-    beaker: Beaker,
-    bell: Bell,
     'big-commerce': BigCommerce,
-    bookmark: Bookmark,
     bulb: Bulb,
     'caret-bottom': CaretBotton,
     'caret-left': CaretLeft,
     'caret-right': CaretRight,
     'caret-top': CaretTop,
     charts: Charts,
-    chat: Chat,
-    'check-circle': CheckCircle,
-    'check-square': CheckSquare,
     check: Check,
-    checked: Checked,
-    'clock-reversed': ClockReversed,
     clock: Clock,
-    'close-thick': CloseThick,
+    'clock-reversed': ClockReversed,
     close: Close,
     code: Code,
     company: Company,
     copy: Copy,
-    'credit-card': CreditCard,
     cube: Cube,
     dashboard: Dashboard,
     delete: Delete,
-    details: Details,
     documentation: Documentation,
     dollar: Dollar,
-    'dot-fill': DotFill,
     dot: Dot,
-    download: Download,
+    'dot-fill': DotFill,
     edit: Edit,
     email: Email,
-    enter: Enter,
-    exchange: Exchange,
     expand: Expand,
     export: Export,
     'eye-crossed-out': EyeCrossedOut,
@@ -528,47 +471,31 @@ const ConsoleIcons = {
     flag: Flag,
     forbidden: Forbidden,
     globe: Globe,
-    'home-user': HomeUser,
-    home: Home,
     hourglass: Hourglass,
     import: Import,
     info: Info,
-    label: Label,
     latitude: Latitude,
-    leave: Leave,
     load: Load,
-    location: Location,
     longitude: Longitude,
     manage: Manage,
     marker: Marker,
     member: Member,
     members: Members,
-    'menu-circle-horizontal': MenuCircleHorizontal,
-    'menu-circle-vertical': MenuCircleVertical,
-    'menu-horizontal': MenuHorizontal,
     'menu-vertical': MenuVertical,
-    metrics: Metrics,
-    more: More,
-    organization: Organization,
-    organizations: Organizations,
     phone: Phone,
-    platform: Platform,
-    prize: Prize,
     'product-activated': ProductActivated,
     'product-add': ProductAdd,
     products: Products,
     projects: Projects,
-    puzzle: Puzzle,
     question: Question,
-    receipt: Receipt,
     search: Search,
     'see-page': SeePage,
     settings: Settings,
     shield: Shield,
     shortcut: Shortcut,
     'social-facebook': SocialFacebook,
-    'social-github': socialGithub,
-    'social-google': socialGoogle,
+    'social-github': SocialGithub,
+    'social-google': SocialGoogle,
     'social-linkedin': SocialLinkedin,
     'social-twitter': SocialTwitter,
     'star-filled': StarFilled,
@@ -577,11 +504,9 @@ const ConsoleIcons = {
     switch: Switch,
     team: Team,
     time: Time,
-    tool: Tool,
     user: User,
     'view-card': ViewCard,
     'view-list': ViewList,
-    'view-mini-card': ViewMiniCard,
     warning: Warning,
     woosmap: Woosmap,
 
@@ -597,6 +522,7 @@ const ConsoleIcons = {
     'indoor-airlines_counter': IndoorAirlinesCounter,
     'indoor-alcohol': IndoorAlcohol,
     'indoor-amenity': IndoorAmenity,
+    'indoor-arrival': IndoorArrival,
     'indoor-art': IndoorArt,
     'indoor-assembly_point': IndoorAssemblyPoint,
     'indoor-atm': IndoorAtm,
@@ -621,7 +547,7 @@ const ConsoleIcons = {
     'indoor-convinience_store': IndoorConvinienceStore,
     'indoor-cosmetics': IndoorCosmetics,
     'indoor-default': IndoorDefault,
-    'indoor-defibrilator': IndoorDefibrilator,
+    'indoor-defibrillator': IndoorDefibrillator,
     'indoor-department_store': IndoorDepartmentStore,
     'indoor-device_charging_station': IndoorDeviceChargingStation,
     'indoor-dining': IndoorDining,
@@ -632,10 +558,10 @@ const ConsoleIcons = {
     'indoor-duty_free': IndoorDutyFree,
     'indoor-electronics': IndoorElectronics,
     'indoor-elevator': IndoorElevator,
-    'indoor-emmergency_exit': IndoorEmmergencyExit,
+    'indoor-exit-emergency': IndoorExitEmergency,
     'indoor-entertainment': IndoorEntertainment,
     'indoor-entrance': IndoorEntrance,
-    'indoor-escalator': IndoorEscalator,
+    'indoor-conveying-forward': IndoorConveyingForward,
     'indoor-fashion_accessories': IndoorFashionAccessories,
     'indoor-fast_food': IndoorFastFood,
     'indoor-fire_extinguisher': IndoorFireExtinguisher,
@@ -712,12 +638,12 @@ const Icons = {
 
 class Icon extends Component {
     render() {
-        const { icon, size, className, title, testId } = this.props;
+        const { icon, size, className, isFill, isLoad, title, testId } = this.props;
         const IconComponent = Object.keys(Icons).includes(icon) ? Icons[icon] : Woosmap;
-
+        const classes = cl('icon', { 'icon--fill': isFill }, { 'icon--load': isLoad }, className);
         return (
             <IconComponent
-                className={cl('icon', className)}
+                className={classes}
                 data-testid={`${testId}-${icon}`}
                 width={size}
                 height={size}
@@ -728,16 +654,20 @@ class Icon extends Component {
 }
 
 Icon.defaultProps = {
-    size: 24,
+    size: 22,
     className: null,
     title: null,
     testId: 'icon',
+    isFill: false,
+    isLoad: false,
 };
 
 Icon.propTypes = {
     size: PropTypes.number,
     className: PropTypes.string,
     icon: PropTypes.string.isRequired,
+    isFill: PropTypes.bool,
+    isLoad: PropTypes.bool,
     title: PropTypes.string,
     testId: PropTypes.string,
 };

package/src/components/Icon/Icon.stories.js

@@ -10,7 +10,7 @@ export default Story;
 
 const Template = () => (
     <div>
-        <Icon size={64} icon="home" />
+        <Icon size={64} icon="marker" />
     </div>
 );
 
@@ -30,6 +30,6 @@ const drawIcon = (icon) => (
 
 export const All = () => <div className="flex-wrap">{Object.keys(Icons).map(drawIcon)}</div>;
 export const Website = () => <div className="flex-wrap">{Object.keys(WebsiteIcons).map(drawIcon)}</div>;
-export const Console = () => <div className="flex-wrap">{Object.keys(ConsoleIcons).map(drawIcon)}</div>;
+export const Console = () => <div className="flex-wrap icon-console">{Object.keys(ConsoleIcons).map(drawIcon)}</div>;
 export const Products = () => <div className="flex-wrap">{Object.keys(ProductsIcons).map(drawIcon)}</div>;
 export const NotExisting = () => <div className="flex-wrap">{drawIcon('not-existing-icon')}</div>;

package/src/components/Icon/Icon.test.js

@@ -5,13 +5,13 @@ import '@testing-library/jest-dom/extend-expect';
 import Icon from './Icon';
 
 it('renders an icon component', () => {
-    const { getByTestId } = render(<Icon icon="home" size={64} />);
+    const { getByTestId } = render(<Icon icon="marker" size={64} />);
 
-    const result = getByTestId('icon-home');
+    const result = getByTestId('icon-marker');
 
     expect(result).toHaveClass('icon');
     expect(result).toHaveAttribute('width', '64');
-    expect(result).toHaveTextContent('home');
+    expect(result).toHaveTextContent('marker');
 });
 
 const isIconRendered = (icon) => {

package/src/components/Icon/icon-story.styl

@@ -15,4 +15,16 @@
 	&__name
 		margin-top 1rem
 	&:hover
-		background-color $primary10
+		background-color $primary10
+	.icon-console
+		.icon
+			trans()
+			stroke $secondary
+			stroke-linecap round
+			stroke-linejoin round
+			&:not(.icon--fill)
+				fill none
+			&--fill
+				stroke-width: 0
+				stroke $secondary
+			

package/src/components/Input/Input.js

@@ -43,6 +43,7 @@ export default class Input extends Component {
             onBlur,
             onFocus,
             icon,
+            isInputIconFill,
             enableTogglePassword,
         } = this.props;
 
@@ -52,20 +53,20 @@ export default class Input extends Component {
 
         switch (iconSize) {
             case 'normal':
-                iconSize = 24;
+                iconSize = 22;
                 break;
             case 'large':
-                iconSize = 26;
+                iconSize = 24;
                 break;
             case 'small':
-                iconSize = 22;
+                iconSize = 20;
                 break;
             default:
-                iconSize = 24;
+                iconSize = 22;
         }
         return (
             <div className="input__container">
-                {icon ? <Icon icon={icon} size={iconSize} /> : null}
+                {icon ? <Icon icon={icon} isFill={isInputIconFill} size={iconSize} /> : null}
                 {React.createElement(type === 'textarea' ? 'textarea' : 'input', {
                     className: cl('input__item', {
                         error,
@@ -90,13 +91,14 @@ export default class Input extends Component {
                     <span
                         onKeyDown={() => ({})}
                         role="button"
+                        className="password-toggle"
                         tabIndex={0}
                         onClick={() => this.setState({ showPassword: !showPassword })}
                     >
                         <Icon
                             icon={showPassword ? 'eye-crossed-out' : 'eye'}
                             size={iconSize}
-                            className={cl('icon--password-toggle', { showed: showPassword })}
+                            className={{ showed: showPassword }}
                         />
                     </span>
                 )}
@@ -105,7 +107,19 @@ export default class Input extends Component {
     };
 
     render() {
-        const { hideLabel, error, label, className, size, type, icon, isFilter, isNoBorder, disabled } = this.props;
+        const {
+            hideLabel,
+            error,
+            label,
+            className,
+            size,
+            type,
+            icon,
+            enableTogglePassword,
+            isFilter,
+            isNoBorder,
+            disabled,
+        } = this.props;
         const errorComponent = error ? (
             <span className="input__error" data-testid="input-error">
                 {error}
@@ -116,7 +130,7 @@ export default class Input extends Component {
             isFilter && type !== 'checkbox' && type !== 'radio' && type !== 'textarea' ? 'input--filter' : null,
             isNoBorder && type !== 'checkbox' && type !== 'radio' && type !== 'textarea' ? 'input--noborder' : null,
             { 'input--iconed': icon },
-            { 'input--password-toggle': type === 'password' },
+            { 'input--password-toggle': enableTogglePassword && type === 'password' },
             `input--${size}`,
             type === 'checkbox' || type === 'radio' ? `input--${type}` : null,
             disabled ? 'input--disabled' : null,
@@ -167,6 +181,7 @@ Input.propTypes = {
     onFocus: PropTypes.func,
     onPressEnter: PropTypes.func,
     enableTogglePassword: PropTypes.bool,
+    isInputIconFill: PropTypes.bool,
 };
 
 Input.defaultProps = {
@@ -192,4 +207,5 @@ Input.defaultProps = {
     onBlur: null,
     onFocus: null,
     enableTogglePassword: false,
+    isInputIconFill: false,
 };

package/src/components/Input/Input.stories.js

@@ -76,7 +76,7 @@ const Template = (args) => {
                 type="password"
                 label="Password with icon"
                 hideLabel={hideLabel}
-                icon="woosmap"
+                icon="marker"
             />
             <Input
                 placeholder="Type password"
@@ -86,7 +86,7 @@ const Template = (args) => {
                 enableTogglePassword
             />
             <Input
-                icon="woosmap"
+                icon="shield"
                 placeholder="Type password"
                 type="password"
                 label="Password with icon and toggle"

package/src/components/Label/Label.js

@@ -43,8 +43,9 @@ export default class Label extends Component {
                 {closable && (
                     <Button
                         type="link-flex"
-                        iconSize={12}
-                        icon="close-thick"
+                        className="icon--thicker"
+                        iconSize={10}
+                        icon="close"
                         onClick={closeCb}
                         testId={`${testId}-button`}
                     />

package/src/components/Label/Label.styl

@@ -12,7 +12,7 @@
 	margin .2rem 0
 	word-break break-all
 	.icon
-		fill $light
+		stroke $light
 	&--round
 		br(50)
 		sq($buttonHeight)
@@ -134,10 +134,10 @@
 		text-shadow none
 		.btn
 			.icon
-				fill $secondary70
+				stroke $secondary70
 			&:hover
 				.icon
-					fill $secondary70 !important
+					stroke $secondary70 !important
 	&--white
 		background-color $light
 		color $secondary
@@ -145,7 +145,7 @@
 		border .1rem solid $borderColor
 		.btn
 			.icon
-				fill $secondary40
+				stroke $secondary40
 			&:hover
 				.icon
-					fill $secondary40 !important
+					stroke $secondary40 !important

package/src/components/Modal/Modal.styl

@@ -57,7 +57,7 @@
 			right 2rem
 			cursor pointer
 			.icon
-				fill $light
+				stroke $light
 	&__footer
 	&__header
 		padding 1.8rem 2.4rem

package/src/components/ServiceMessage/ServiceMessage.styl

@@ -20,10 +20,10 @@
 		background-color $info
 	.btn
 		.icon
-			fill $light
+			stroke $light
 		&:hover
 			.icon
-				fill $success2
+				stroke $success2
 	&__text
 		textShadow()
 		font-size $fontSize + .1

package/src/components/SnackBar/SnackBar.styl

@@ -22,7 +22,7 @@
 	&--info
 		background-color $info
 	.icon
-		fill $light
+		stroke $light
 	&__text
 		textShadow()
 		font-size $fontSize + .1

package/src/components/Stepper/Stepper.styl

@@ -1,5 +1,5 @@
 .stepper
 	flexMiddle()
 	&--current
-		fill $primary
+		stroke $primary
 

package/src/components/Tab/Tab.stories.js

@@ -35,7 +35,7 @@ const Template = () => (
         <div title="Types & tags" icon="shield" iconSize="30">
             My 4th tab content
         </div>
-        <div title="Custom fields" icon="home" iconSize="30">
+        <div title="Custom fields" icon="marker" iconSize="30">
             My 5th tab content
         </div>
         <div title="Localized names" icon="asset" iconSize="30">

package/src/icons/add-circle.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 3.017C8.093 3.017 3.018 6 3.018 11c0 4.907 2.982 9.983 7.982 9.983 4.907 0 9.982-2.986 9.982-7.983C20.982 8.093 18 3.017 13 3.017zm-2 16.846c-4.3 0-6.863-4.507-6.863-8.863 0-4.3 4.507-6.863 8.863-6.863 4.3 0 6.863 4.507 6.863 8.863 0 4.3-4.507 6.863-8.863 6.863z"/><path d="M16.018 11.446H12.7V8.13a.56.56 0 1 0-1.119 0v3.315H8.266a.56.56 0 0 0 0 1.12h3.316v3.316a.56.56 0 1 0 1.119 0v-3.315h3.317a.56.56 0 0 0 0-1.12z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="12.009" y1="16.206" x2="12.01" y2="7.798"/><line x1="16.213" y1="12.002" x2="7.806" y2="12.002"/><circle cx="12.009" cy="12.002" r="9.386"/></svg>

package/src/icons/add.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.888 11.306H12.7V4.113a.7.7 0 0 0-1.4 0v7.193H4.1a.7.7 0 1 0 0 1.4h7.2V19.9a.7.7 0 1 0 1.4 0v-7.194h7.192a.7.7 0 0 0 0-1.4z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><line x1="11.995" y1="17.482" x2="11.996" y2="6.53"/><line x1="17.471" y1="12.006" x2="6.519" y2="12.005"/></svg>

package/src/icons/admin-key.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.711 20.817H7.289a.559.559 0 0 1-.485-.28l-4.712-8.161a.558.558 0 0 1 0-.559L6.8 3.656a.559.559 0 0 1 .485-.28h6.1a.56.56 0 1 1 0 1.12H7.612L3.223 12.1l4.389 7.6h8.776l4.389-7.6-1.3-2.259a.56.56 0 0 1 .97-.561l1.466 2.539a.56.56 0 0 1 0 .56L17.2 20.537a.559.559 0 0 1-.489.28z"/><path d="M11.163 16.743A4.169 4.169 0 1 1 12.3 8.565l6.723-6.723a.55.55 0 0 1 .5-.154.557.557 0 0 1 .41.32l1.242 2.748a.56.56 0 0 1-.347.766l-1.359.415-.116.983a.561.561 0 0 1-.5.491l-.734.077-.062.711a.563.563 0 0 1-.162.347l-2.762 2.762a4.168 4.168 0 0 1-3.971 5.435zm0-7.217a3.049 3.049 0 1 0 2.809 1.857.56.56 0 0 1 .119-.614L16.96 7.9l.085-.967a.559.559 0 0 1 .5-.508l.748-.079.106-.9a.56.56 0 0 1 .394-.469l1.1-.336-.646-1.429L12.851 9.6a.559.559 0 0 1-.6.127 3.07 3.07 0 0 0-1.091-.201z"/><circle cx="10.913" cy="12.822" r="1.203"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m13.468,3.541h-3.761c-1.655,0-3.183.883-4.011,2.316l-2.292,3.971c-.827,1.433-.827,3.198,0,4.631l2.292,3.971c.827,1.433,2.356,2.316,4.011,2.316h4.585c1.655,0,3.183-.883,4.011-2.316l2.292-3.971c.827-1.433.827-3.198,0-4.631l-.208-.361"/><path d="m12.479,9.095c-1.36-.521-2.957-.239-4.053.857-1.486,1.486-1.486,3.896,0,5.383s3.896,1.486,5.383,0c1.129-1.129,1.395-2.789.81-4.174l3.178-3.178.108-1.233,1.257-.133.168-1.42,1.801-.549-1.309-2.897-7.344,7.344Z"/><circle cx="10.854" cy="12.907" r="1.268"/></svg>