Skip to content

Commit

Permalink
refactor(icon): use font instead of svg
Browse files Browse the repository at this point in the history
  • Loading branch information
@dpellier
dpellier committed Jul 29, 2024
1 parent 1248ed9 commit d8abb5e
Show file tree
Hide file tree
Showing 19 changed files with 559 additions and 47 deletions.
2 changes: 1 addition & 1 deletion packages/ods/react/tests/_app/src/components/ods-icon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { OdsIcon } from 'ods-components-react';

const Icon = () => {
return (
<OdsIcon name={ ODS_ICON_NAME.warning } />
<OdsIcon name={ ODS_ICON_NAME.add } />
);
};

Expand Down
7 changes: 0 additions & 7 deletions packages/ods/src/components/icon/TODO.md
View file

This file was deleted.

4 changes: 0 additions & 4 deletions packages/ods/src/components/icon/src/assets/icons.data.json
View file

This file was deleted.

168 changes: 161 additions & 7 deletions packages/ods/src/components/icon/src/components/ods-icon/ods-icon.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,163 @@
// TODO replace all this with dedicated icon font when file server get available
:host(.ods-icon) {
display: inline-block;
mask: center/contain no-repeat;
mask-image: var(--ods-icon-mask-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'/%3E"));
background-color: var(--ods-color-primary-500);
width: 1rem;
height: 1rem;
/* use !important to prevent issues with browser extensions that change fonts */
text-transform: none;
line-height: 1;
font-family: 'ODS Icon', serif !important;
speak: never;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-variant: normal;
font-style: normal;
}

:host(.ods-icon__add)::before { content: '\e900'; }
:host(.ods-icon__apps)::before { content: '\e901'; }
:host(.ods-icon__arrow-crossed)::before { content: '\e902'; }
:host(.ods-icon__arrow-down-left)::before { content: '\e903'; }
:host(.ods-icon__arrow-down-right)::before { content: '\e904'; }
:host(.ods-icon__arrow-down)::before { content: '\e905'; }
:host(.ods-icon__arrow-left-right)::before { content: '\e906'; }
:host(.ods-icon__arrow-left)::before { content: '\e907'; }
:host(.ods-icon__arrow-right)::before { content: '\e908'; }
:host(.ods-icon__arrow-up-down)::before { content: '\e909'; }
:host(.ods-icon__arrow-up-left)::before { content: '\e90a'; }
:host(.ods-icon__arrow-up-right)::before { content: '\e90b'; }
:host(.ods-icon__arrow-up)::before { content: '\e90c'; }
:host(.ods-icon__baremetal-rack)::before { content: '\e90d'; }
:host(.ods-icon__baremetal)::before { content: '\e90e'; }
:host(.ods-icon__bell)::before { content: '\e90f'; }
:host(.ods-icon__book)::before { content: '\e910'; }
:host(.ods-icon__calendar)::before { content: '\e911'; }
:host(.ods-icon__chat)::before { content: '\e912'; }
:host(.ods-icon__check)::before { content: '\e913'; }
:host(.ods-icon__checkbox-indeterminate)::before { content: '\e914'; }
:host(.ods-icon__checkbox)::before { content: '\e915'; }
:host(.ods-icon__chevron-down)::before { content: '\e916'; }
:host(.ods-icon__chevron-left)::before { content: '\e917'; }
:host(.ods-icon__chevron-right)::before { content: '\e918'; }
:host(.ods-icon__chevron-up)::before { content: '\e919'; }
:host(.ods-icon__chrono)::before { content: '\e91a'; }
:host(.ods-icon__circle)::before { content: '\e91b'; }
:host(.ods-icon__cloud-check)::before { content: '\e91c'; }
:host(.ods-icon__cloud-cross)::before { content: '\e91d'; }
:host(.ods-icon__cloud-down)::before { content: '\e91e'; }
:host(.ods-icon__cloud-lock-fill)::before { content: '\e91f'; }
:host(.ods-icon__cloud-up)::before { content: '\e920'; }
:host(.ods-icon__cloud)::before { content: '\e921'; }
:host(.ods-icon__collab)::before { content: '\e922'; }
:host(.ods-icon__component)::before { content: '\e924'; }
:host(.ods-icon__critical-full)::before { content: '\e925'; }
:host(.ods-icon__critical)::before { content: '\e926'; }
:host(.ods-icon__cross)::before { content: '\e927'; }
:host(.ods-icon__d-pad)::before { content: '\e928'; }
:host(.ods-icon__danger-full)::before { content: '\e929'; }
:host(.ods-icon__danger)::before { content: '\e92a'; }
:host(.ods-icon__delivery)::before { content: '\e92b'; }
:host(.ods-icon__diamond)::before { content: '\e92c'; }
:host(.ods-icon__double-chevron-left)::before { content: '\e92d'; }
:host(.ods-icon__double-chevron-right)::before { content: '\e92e'; }
:host(.ods-icon__download)::before { content: '\e92f'; }
:host(.ods-icon__email)::before { content: '\e930'; }
:host(.ods-icon__equal)::before { content: '\e931'; }
:host(.ods-icon__error-circle)::before { content: '\e932'; }
:host(.ods-icon__external-link)::before { content: '\e933'; }
:host(.ods-icon__eye-close)::before { content: '\e934'; }
:host(.ods-icon__eye-open)::before { content: '\e935'; }
:host(.ods-icon__face-activated)::before { content: '\e936'; }
:host(.ods-icon__face-dissatisfied)::before { content: '\e937'; }
:host(.ods-icon__face-dizzy)::before { content: '\e938'; }
:host(.ods-icon__face-neutral)::before { content: '\e939'; }
:host(.ods-icon__face-satisfied)::before { content: '\e93a'; }
:host(.ods-icon__face-wink)::before { content: '\e93b'; }
:host(.ods-icon__file-minus)::before { content: '\e93c'; }
:host(.ods-icon__file-plus)::before { content: '\e93d'; }
:host(.ods-icon__file)::before { content: '\e93e'; }
:host(.ods-icon__files-copy)::before { content: '\e93f'; }
:host(.ods-icon__filter)::before { content: '\e940'; }
:host(.ods-icon__focus)::before { content: '\e941'; }
:host(.ods-icon__folder-minus)::before { content: '\e942'; }
:host(.ods-icon__folder-plus)::before { content: '\e943'; }
:host(.ods-icon__folder)::before { content: '\e944'; }
:host(.ods-icon__game-controler-a)::before { content: '\e945'; }
:host(.ods-icon__game-controler-b)::before { content: '\e946'; }
:host(.ods-icon__gameboy)::before { content: '\e947'; }
:host(.ods-icon__gathering)::before { content: '\e948'; }
:host(.ods-icon__gear)::before { content: '\e949'; }
:host(.ods-icon__globe)::before { content: '\e94a'; }
:host(.ods-icon__grid)::before { content: '\e94b'; }
:host(.ods-icon__help-circle)::before { content: '\e94c'; }
:host(.ods-icon__help)::before { content: '\e94d'; }
:host(.ods-icon__hexagon)::before { content: '\e94e'; }
:host(.ods-icon__hierarchy)::before { content: '\e94f'; }
:host(.ods-icon__home)::before { content: '\e950'; }
:host(.ods-icon__info-circle)::before { content: '\e951'; }
:host(.ods-icon__key)::before { content: '\e952'; }
:host(.ods-icon__labs-between)::before { content: '\e953'; }
:host(.ods-icon__labs-empty)::before { content: '\e954'; }
:host(.ods-icon__labs-full)::before { content: '\e955'; }
:host(.ods-icon__leaf)::before { content: '\e956'; }
:host(.ods-icon__life-buoy)::before { content: '\e957'; }
:host(.ods-icon__lightbulb)::before { content: '\e958'; }
:host(.ods-icon__list)::before { content: '\e959'; }
:host(.ods-icon__location)::before { content: '\e95a'; }
:host(.ods-icon__menu-ellipsis-horizontal)::before { content: '\e95b'; }
:host(.ods-icon__menu-ellipsis-vertical)::before { content: '\e95c'; }
:host(.ods-icon__menu-hamburger)::before { content: '\e95d'; }
:host(.ods-icon__minus)::before { content: '\e95e'; }
:host(.ods-icon__money)::before { content: '\e95f'; }
:host(.ods-icon__network)::before { content: '\e960'; }
:host(.ods-icon__padlock-close)::before { content: '\e961'; }
:host(.ods-icon__padlock-open)::before { content: '\e962'; }
:host(.ods-icon__pen)::before { content: '\e963'; }
:host(.ods-icon__phone)::before { content: '\e964'; }
:host(.ods-icon__printer)::before { content: '\e965'; }
:host(.ods-icon__product-3az)::before { content: '\e966'; }
:host(.ods-icon__promotion)::before { content: '\e967'; }
:host(.ods-icon__purchase)::before { content: '\e968'; }
:host(.ods-icon__radio)::before { content: '\e969'; }
:host(.ods-icon__refresh)::before { content: '\e96a'; }
:host(.ods-icon__resize)::before { content: '\e96b'; }
:host(.ods-icon__screen)::before { content: '\e96c'; }
:host(.ods-icon__search)::before { content: '\e96d'; }
:host(.ods-icon__share)::before { content: '\e96e'; }
:host(.ods-icon__shield-check)::before { content: '\e96f'; }
:host(.ods-icon__shield-cross)::before { content: '\e970'; }
:host(.ods-icon__shield-firewall)::before { content: '\e971'; }
:host(.ods-icon__shield-lock-fill)::before { content: '\e972'; }
:host(.ods-icon__shield-minus)::before { content: '\e973'; }
:host(.ods-icon__shield-off)::before { content: '\e974'; }
:host(.ods-icon__shield-plus)::before { content: '\e975'; }
:host(.ods-icon__shield-warning)::before { content: '\e976'; }
:host(.ods-icon__shield)::before { content: '\e977'; }
:host(.ods-icon__shopping-cart-add)::before { content: '\e978'; }
:host(.ods-icon__shopping-cart-clear)::before { content: '\e979'; }
:host(.ods-icon__shopping-cart-error)::before { content: '\e97a'; }
:host(.ods-icon__shopping-cart-minus)::before { content: '\e97b'; }
:host(.ods-icon__shopping-cart)::before { content: '\e97c'; }
:host(.ods-icon__shrink)::before { content: '\e97d'; }
:host(.ods-icon__shutdown)::before { content: '\e97e'; }
:host(.ods-icon__sort-alpha-down)::before { content: '\e983'; }
:host(.ods-icon__sort-alpha-up)::before { content: '\e984'; }
:host(.ods-icon__sort-num-down)::before { content: '\e985'; }
:host(.ods-icon__sort-num-up)::before { content: '\e986'; }
:host(.ods-icon__square)::before { content: '\e987'; }
:host(.ods-icon__star-filled)::before { content: '\e988'; }
:host(.ods-icon__star)::before { content: '\e989'; }
:host(.ods-icon__status)::before { content: '\e98a'; }
:host(.ods-icon__store)::before { content: '\e98b'; }
:host(.ods-icon__success-circle)::before { content: '\e98c'; }
:host(.ods-icon__time-0am)::before { content: '\e98d'; }
:host(.ods-icon__time-3am)::before { content: '\e98e'; }
:host(.ods-icon__time-4am)::before { content: '\e98f'; }
:host(.ods-icon__time-6am)::before { content: '\e990'; }
:host(.ods-icon__time-9am)::before { content: '\e991'; }
:host(.ods-icon__traffic-cone)::before { content: '\e992'; }
:host(.ods-icon__trash)::before { content: '\e993'; }
:host(.ods-icon__triangle)::before { content: '\e994'; }
:host(.ods-icon__undo)::before { content: '\e995'; }
:host(.ods-icon__upload)::before { content: '\e996'; }
:host(.ods-icon__user-circle)::before { content: '\e997'; }
:host(.ods-icon__user)::before { content: '\e998'; }
:host(.ods-icon__warning-triangle-full)::before { content: '\e999'; }
:host(.ods-icon__warning-triangle)::before { content: '\e99a'; }
12 changes: 3 additions & 9 deletions packages/ods/src/components/icon/src/components/ods-icon/ods-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import type { OdsIconName } from '../../constants/icon-name';
import type { FunctionalComponent } from '@stencil/core';
import { Component, Host, Prop, h } from '@stencil/core';
import icons from '../../assets/icons.data.json'; // TODO replace with dedicated icon font when file server get available

@Component({
shadow: true,
Expand All @@ -13,16 +12,11 @@ export class OdsIcon {
@Prop({ reflect: true }) name!: OdsIconName;

render(): FunctionalComponent {
const base64Icon = icons[this.name];

return (
<Host
class="ods-icon"
alt={ this.alt }
style={
(base64Icon ? { '--ods-icon-mask-image': `url("${base64Icon}")` } : { })
}
></Host>
class={ `ods-icon ods-icon__${this.name}` }
alt={ this.alt }>
</Host>
);
}
}
151 changes: 149 additions & 2 deletions packages/ods/src/components/icon/src/constants/icon-name.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,154 @@
enum ODS_ICON_NAME {
// TODO need actual list from design
add = 'add',
apps = 'apps',
arrowCrossed = 'arrow-crossed',
arrowDownLeft = 'arrow-down-left',
arrowDownRight = 'arrow-down-right',
arrowDown = 'arrow-down',
arrowLeftRight = 'arrow-left-right',
arrowLeft = 'arrow-left',
warning = 'warning',
arrowRight = 'arrow-right',
arrowUpDown = 'arrow-up-down',
arrowUpLeft = 'arrow-up-left',
arrowUpRight = 'arrow-up-right',
arrowUp = 'arrow-up',
baremetalRack = 'baremetal-rack',
baremetal = 'baremetal',
bell = 'bell',
book = 'book',
calendar = 'calendar',
chat = 'chat',
check = 'check',
checkboxIndeterminate = 'checkbox-indeterminate',
checkbox = 'checkbox',
chevronDown = 'chevron-down',
chevronLeft = 'chevron-left',
chevronRight = 'chevron-right',
chevronUp = 'chevron-up',
chrono = 'chrono',
circle = 'circle',
cloudCheck = 'cloud-check',
cloudCross = 'cloud-cross',
cloudDown = 'cloud-down',
cloudLockFill = 'cloud-lock-fill',
cloudUp = 'cloud-up',
cloud = 'cloud',
collab = 'collab',
component = 'component',
criticalFull = 'critical-full',
critical = 'critical',
cross = 'cross',
dPad = 'd-pad',
dangerFull = 'danger-full',
danger = 'danger',
delivery = 'delivery',
diamond = 'diamond',
doubleChevronLeft = 'double-chevron-left',
doubleChevronRight = 'double-chevron-right',
download = 'download',
email = 'email',
equal = 'equal',
errorCircle = 'error-circle',
externalLink = 'external-link',
eyeClose = 'eye-close',
eyeOpen = 'eye-open',
faceActivated = 'face-activated',
faceDissatisfied = 'face-dissatisfied',
faceDizzy = 'face-dizzy',
faceNeutral = 'face-neutral',
faceSatisfied = 'face-satisfied',
faceWink = 'face-wink',
fileMinus = 'file-minus',
filePlus = 'file-plus',
file = 'file',
filesCopy = 'files-copy',
filter = 'filter',
focus = 'focus',
folderMinus = 'folder-minus',
folderPlus = 'folder-plus',
folder = 'folder',
gameControlerA = 'game-controler-a',
gameControlerB = 'game-controler-b',
gameboy = 'gameboy',
gathering = 'gathering',
gear = 'gear',
globe = 'globe',
grid = 'grid',
helpCircle = 'help-circle',
help = 'help',
hexagon = 'hexagon',
hierarchy = 'hierarchy',
home = 'home',
infoCircle = 'info-circle',
key = 'key',
labsBetween = 'labs-between',
labsEmpty = 'labs-empty',
labsFull = 'labs-full',
leaf = 'leaf',
lifeBuoy = 'life-buoy',
lightbulb = 'lightbulb',
list = 'list',
location = 'location',
menuEllipsisHorizontal = 'menu-ellipsis-horizontal',
menuEllipsisVertical = 'menu-ellipsis-vertical',
menuHamburger = 'menu-hamburger',
minus = 'minus',
money = 'money',
network = 'network',
padlockClose = 'padlock-close',
padlockOpen = 'padlock-open',
pen = 'pen',
phone = 'phone',
printer = 'printer',
product3az = 'product-3az',
promotion = 'promotion',
purchase = 'purchase',
radio = 'radio',
refresh = 'refresh',
resize = 'resize',
screen = 'screen',
search = 'search',
share = 'share',
shieldCheck = 'shield-check',
shieldCross = 'shield-cross',
shieldFirewall = 'shield-firewall',
shieldLockFill = 'shield-lock-fill',
shieldMinus = 'shield-minus',
shieldOff = 'shield-off',
shieldPlus = 'shield-plus',
shieldWarning = 'shield-warning',
shield = 'shield',
shoppingCartAdd = 'shopping-cart-add',
shoppingCartClear = 'shopping-cart-clear',
shoppingCartError = 'shopping-cart-error',
shoppingCartMinus = 'shopping-cart-minus',
shoppingCart = 'shopping-cart',
shrink = 'shrink',
shutdown = 'shutdown',
sortAlphaDown = 'sort-alpha-down',
sortAlphaUp = 'sort-alpha-up',
sortNumDown = 'sort-num-down',
sortNumUp = 'sort-num-up',
square = 'square',
starFilled = 'star-filled',
star = 'star',
status = 'status',
store = 'store',
successCircle = 'success-circle',
time0am = 'time-0am',
time3am = 'time-3am',
time4am = 'time-4am',
time6am = 'time-6am',
time9am = 'time-9am',
trafficCone = 'traffic-cone',
trash = 'trash',
triangle = 'triangle',
undo = 'undo',
upload = 'upload',
userCircle = 'user-circle',
user = 'user',
warningTriangleFull = 'warning-triangle-full',
warningTriangle = 'warning-triangle',
}

type OdsIconName =`${ODS_ICON_NAME}`;
Expand Down
Loading

0 comments on commit d8abb5e

Please sign in to comment.