From 13468e3c1b4c3d9d2d19e4437f1265daaa3d115e Mon Sep 17 00:00:00 2001 From: Timothy Farrell Date: Sat, 30 Jun 2018 09:00:51 -0500 Subject: [PATCH] Switch to FontAwesome SVG icons --- packages/gallery/src/assets/fa-pro-light.svg | 3950 +++++++++++++++++ packages/gallery/src/interface/allImages.js | 14 +- .../src/interface/components/appbar.js | 2 +- .../gallery/src/interface/components/icon.js | 47 +- packages/gallery/src/interface/focus.js | 6 +- packages/gallery/src/interface/gallery.js | 2 +- .../gallery/src/interface/sectionPhoto.js | 2 +- packages/gallery/src/interface/sectionView.js | 2 +- 8 files changed, 3968 insertions(+), 57 deletions(-) create mode 100644 packages/gallery/src/assets/fa-pro-light.svg diff --git a/packages/gallery/src/assets/fa-pro-light.svg b/packages/gallery/src/assets/fa-pro-light.svg new file mode 100644 index 0000000..82c2d68 --- /dev/null +++ b/packages/gallery/src/assets/fa-pro-light.svg @@ -0,0 +1,3950 @@ + + + + Address Book + + + + Address Card + + + + adjust + + + + Alarm Clock + + + + align-center + + + + align-justify + + + + align-left + + + + align-right + + + + Allergies + + + + ambulance + + + + American Sign Language Interpreting + + + + Anchor + + + + Angle Double Down + + + + Angle Double Left + + + + Angle Double Right + + + + Angle Double Up + + + + angle-down + + + + angle-left + + + + angle-right + + + + angle-up + + + + Angry Face + + + + Archive + + + + Archway + + + + Alternate Arrow Circle Down + + + + Alternate Arrow Circle Left + + + + Alternate Arrow Circle Right + + + + Alternate Arrow Circle Up + + + + Alternate Arrow Down + + + + Alternate Arrow from Bottom + + + + Alternate Arrow from Left + + + + Alternate Arrow from Right + + + + Alternate Arrow from Top + + + + Alternate Arrow Left + + + + Alternate Arrow Right + + + + Alternate Arrow Square Down + + + + Alternate Arrow Square Left + + + + Alternate Arrow Square Right + + + + Alternate Arrow Square Up + + + + Alternate Arrow to Bottom + + + + Alternate Arrow to Left + + + + Alternate Arrow to Right + + + + Alternate Arrow to Top + + + + Alternate Arrow Up + + + + Arrow Circle Down + + + + Arrow Circle Left + + + + Arrow Circle Right + + + + Arrow Circle Up + + + + arrow-down + + + + Arrow from Bottom + + + + Arrow from Left + + + + Arrow from Right + + + + Arrow from Top + + + + arrow-left + + + + arrow-right + + + + Arrow Square Down + + + + Arrow Square Left + + + + Arrow Square Right + + + + Arrow Square Up + + + + Arrow to Bottom + + + + Arrow to Left + + + + Arrow to Right + + + + Arrow to Top + + + + arrow-up + + + + Arrows + + + + Alternate Arrows + + + + Alternate Arrows Horizontal + + + + Alternate Arrows Vertical + + + + Arrows Horizontal + + + + Arrows Vertical + + + + Assistive Listening Systems + + + + asterisk + + + + At + + + + Atlas + + + + Audio Description + + + + Award + + + + Backspace + + + + backward + + + + Badge + + + + Check Badge + + + + Balance Scale + + + + Balance Scale (Left-Weighted) + + + + Balance Scale (Right-Weighted) + + + + ban + + + + Band-Aid + + + + barcode + + + + Alternate Barcode + + + + Barcode Read + + + + Barcode Scan + + + + Bars + + + + Baseball + + + + Baseball Ball + + + + Basketball Ball + + + + Basketball Hoop + + + + Bath + + + + Battery Bolt + + + + Battery Empty + + + + Battery Full + + + + Battery 1/2 Full + + + + Battery 1/4 Full + + + + Battery Slash + + + + Battery 3/4 Full + + + + Bed + + + + beer + + + + bell + + + + Bell Slash + + + + Bezier Curve + + + + Bicycle + + + + Binoculars + + + + Birthday Cake + + + + Blanket + + + + Blender + + + + Blind + + + + bold + + + + Lightning Bolt + + + + Bomb + + + + Bong + + + + book + + + + Book with Heart + + + + Book Open + + + + bookmark + + + + Bowling Ball + + + + Bowling Pins + + + + Box + + + + Alternate Box + + + + Box Check + + + + Box Fragile + + + + Box Full + + + + Box with Heart + + + + Box Open + + + + Box Up + + + + Box with US Dollar + + + + Boxes + + + + Alternate Boxes + + + + Boxing Glove + + + + Braille + + + + Briefcase + + + + Medical Briefcase + + + + Broadcast Tower + + + + Broom + + + + Browser + + + + Brush + + + + Bug + + + + Building + + + + bullhorn + + + + Bullseye + + + + Burn + + + + Bus + + + + Bus Alt + + + + Calculator + + + + Calendar + + + + Alternate Calendar + + + + Calendar Check + + + + Calendar Edit + + + + Calendar Exclamation + + + + Calendar Minus + + + + Calendar Plus + + + + Calendar Times + + + + camera + + + + Alternate Camera + + + + Retro Camera + + + + Cannabis + + + + Capsules + + + + Car + + + + Caret Circle Down + + + + Caret Circle Left + + + + Caret Circle Right + + + + Caret Circle Up + + + + Caret Down + + + + Caret Left + + + + Caret Right + + + + Caret Square Down + + + + Caret Square Left + + + + Caret Square Right + + + + Caret Square Up + + + + Caret Up + + + + Shopping Cart Arrow Down + + + + Add to Shopping Cart + + + + certificate + + + + Chalkboard + + + + Chalkboard Teacher + + + + Area Chart + + + + Bar Chart + + + + Line Chart + + + + Pie Chart + + + + Check + + + + Check Circle + + + + Check Double + + + + Check Square + + + + Chess + + + + Chess Bishop + + + + Alternate Chess Bishop + + + + Chess Board + + + + Chess Clock + + + + Alternate Chess Clock + + + + Chess King + + + + Alternate Chess King + + + + Chess Knight + + + + Alternate Chess Knight + + + + Chess Pawn + + + + Alternate Chess Pawn + + + + Chess Queen + + + + Alternate Chess Queen + + + + Chess Rook + + + + Alternate Chess Rook + + + + Chevron Circle Down + + + + Chevron Circle Left + + + + Chevron Circle Right + + + + Chevron Circle Up + + + + Chevron Double Down + + + + Chevron Double Left + + + + Chevron Double Right + + + + Chevron Double Up + + + + chevron-down + + + + chevron-left + + + + chevron-right + + + + Chevron Square Down + + + + Chevron Square Left + + + + Chevron Square Right + + + + Chevron Square Up + + + + chevron-up + + + + Child + + + + Church + + + + Circle + + + + Circle Notched + + + + Clipboard + + + + Clipboard Check + + + + Clipboard List + + + + Clock + + + + Clone + + + + Closed Captioning + + + + Cloud + + + + Cloud Download + + + + Alternate Cloud Download + + + + Cloud Upload + + + + Alternate Cloud Upload + + + + Club + + + + Cocktail + + + + Code + + + + Code Branch + + + + Code Commit + + + + Code Merge + + + + Coffee + + + + cog + + + + cogs + + + + Coins + + + + Columns + + + + comment + + + + Alternate Comment + + + + Comment Alt-check + + + + Comment Alt-dots + + + + Comment Alt-edit + + + + Comment Alt-exclamation + + + + Comment Alt-lines + + + + Comment Alt-minus + + + + Comment Alt-plus + + + + Alternate Comment Slash + + + + Alternate Comment Smile + + + + Alternate Comment Times + + + + Comment Check + + + + Comment Dots + + + + Comment Edit + + + + Comment Exclamation + + + + Comment Lines + + + + Comment Minus + + + + Comment Plus + + + + Comment Slash + + + + Comment Smile + + + + Comment Times + + + + comments + + + + Comments Alt + + + + Compact Disc + + + + Compass + + + + Compress + + + + Alternate Compress + + + + Compress Wide + + + + Concierge Bell + + + + Container Storage + + + + Conveyor Belt + + + + Alternate Conveyor Belt + + + + Cookie + + + + Cookie Bite + + + + Copy + + + + Copyright + + + + Couch + + + + Credit Card + + + + Credit Card Blank + + + + Credit Card Front + + + + Cricket + + + + crop + + + + Alternate Crop + + + + Crosshairs + + + + Crow + + + + Crown + + + + Cube + + + + Cubes + + + + Curling + + + + Cut + + + + Database + + + + Deaf + + + + Desktop + + + + Alternate Desktop + + + + Diagnoses + + + + Diamond + + + + Dice + + + + Dice Five + + + + Dice Four + + + + Dice One + + + + Dice Six + + + + Dice Three + + + + Dice Two + + + + Digital Tachograph + + + + Divide + + + + Dizzy Face + + + + DNA + + + + Dollar Sign + + + + Dolly + + + + Dolly Empty + + + + Dolly Flatbed + + + + Alternate Dolly Flatbed + + + + Dolly Flatbed-empty + + + + + Door Closed + + + + Door Open + + + + Dot Circle + + + + Dove + + + + Download + + + + Drafting Compass + + + + Drum + + + + Drum Steelpan + + + + Dumbbell + + + + Edit + + + + eject + + + + Horizontal Ellipsis + + + + Alternate Horizontal Ellipsis + + + + Vertical Ellipsis + + + + Alternate Vertical Ellipsis + + + + Envelope + + + + Envelope Open + + + + Envelope Square + + + + Equals + + + + eraser + + + + Euro Sign + + + + Exchange + + + + Alternate Exchange + + + + exclamation + + + + Exclamation Circle + + + + Exclamation Square + + + + Exclamation Triangle + + + + Expand + + + + Alternate Expand + + + + Expand Arrows + + + + Alternate Expand Arrows + + + + Expand Wide + + + + External Link + + + + Alternate External Link + + + + External Link Square + + + + Alternate External Link Square + + + + Eye + + + + Eye Dropper + + + + Eye Slash + + + + fast-backward + + + + fast-forward + + + + Fax + + + + Feather + + + + Feather Alt + + + + Female + + + + Field Hockey + + + + fighter-jet + + + + File + + + + Alternate File + + + + Archive File + + + + Audio File + + + + Check File + + + + Code File + + + + File Contract + + + + File Download + + + + Edit File + + + + Excel File + + + + Exclamation File + + + + File Export + + + + Image File + + + + File Import + + + + File Invoice + + + + File Invoice with US Dollar + + + + Medical File + + + + Alternate Medical File + + + + Minus File + + + + PDF File + + + + Plus File + + + + Powerpoint File + + + + File Prescription + + + + File Signature + + + + Times File + + + + File Upload + + + + Video File + + + + Word File + + + + Fill + + + + Fill Drip + + + + Film + + + + Alternate Film + + + + Filter + + + + Fingerprint + + + + fire + + + + fire-extinguisher + + + + First Aid + + + + Fish + + + + flag + + + + flag-checkered + + + + Flask + + + + Flushed Face + + + + Folder + + + + Folder Open + + + + font + + + + Font Awesome Full Logo + + + + Football Ball + + + + Football Helmet + + + + Forklift + + + + forward + + + + Fragile + + + + Frog + + + + Frowning Face + + + + Frowning Face With Open Mouth + + + + Futbol + + + + Gamepad + + + + Gas Pump + + + + Gavel + + + + Gem + + + + Genderless + + + + gift + + + + Martini Glass + + + + Glass Martini-alt + + + + Glasses + + + + Globe + + + + Globe with Africa shown + + + + Globe with Americas shown + + + + Globe with Asia shown + + + + Golf Ball + + + + Golf Club + + + + Graduation Cap + + + + Greater Than + + + + Greater Than Equal To + + + + Grimacing Face + + + + Grinning Face + + + + Alternate Grinning Face + + + + Grinning Face With Smiling Eyes + + + + Grinning Face With Sweat + + + + Smiling Face With Heart-Eyes + + + + Grinning Squinting Face + + + + Rolling on the Floor Laughing + + + + Star-Struck + + + + Face With Tears of Joy + + + + Face With Tongue + + + + Squinting Face With Tongue + + + + Winking Face With Tongue + + + + Grinning Winking Face + + + + Grip Horizontal + + + + Grip Vertical + + + + H Square + + + + H1 Heading + + + + H2 Heading + + + + H3 Heading + + + + Hand with Heart + + + + Hand Holding + + + + Hand Holding Box + + + + Hand Holding Heart + + + + Hand Holding Seedling + + + + Hand Holding US Dollar + + + + Hand Holding Water + + + + Lizard (Hand) + + + + Paper (Hand) + + + + Peace (Hand) + + + + Hand Pointing Down + + + + Hand Pointing Left + + + + Hand Pointing Right + + + + Hand Pointing Up + + + + Pointer (Hand) + + + + Hand Receiving + + + + Rock (Hand) + + + + Scissors (Hand) + + + + Spock (Hand) + + + + Hands + + + + Hands Heart + + + + Helping Hands + + + + Hands with US Dollar + + + + Handshake + + + + Alternate Handshake + + + + Hashtag + + + + HDD + + + + heading + + + + headphones + + + + Headphones Alt + + + + Headset + + + + Heart + + + + Heart Circle + + + + Heart Square + + + + Heartbeat + + + + Helicopter + + + + Hexagon + + + + Highlighter + + + + History + + + + Hockey Puck + + + + Hockey Sticks + + + + home + + + + Home Heart + + + + hospital + + + + Alternate Hospital + + + + Hospital Symbol + + + + Hot Tub + + + + Hotel + + + + Hourglass + + + + Hourglass End + + + + Hourglass Half + + + + Hourglass Start + + + + I Beam Cursor + + + + Identification Badge + + + + Identification Card + + + + Alternate Identification Card + + + + Image + + + + Images + + + + inbox + + + + Inbox In + + + + Inbox Out + + + + Indent + + + + Industry + + + + Alternate Industry + + + + Infinity + + + + Info + + + + Info Circle + + + + Info Square + + + + Inventory + + + + italic + + + + Jack-o'-lantern + + + + Joint + + + + key + + + + Keyboard + + + + Kissing Face + + + + Kissing Face With Smiling Eyes + + + + Face Blowing a Kiss + + + + Kiwi Bird + + + + Lamp + + + + Language + + + + Laptop + + + + Grinning Face With Big Eyes + + + + Laugh Face with Beaming Eyes + + + + Laughing Squinting Face + + + + Laughing Winking Face + + + + leaf + + + + Leaf Heart + + + + Lemon + + + + Less Than + + + + Less Than Equal To + + + + Level Down + + + + Alternate Level Down + + + + Level Up + + + + Alternate Level Up + + + + Life Ring + + + + Lightbulb + + + + Link + + + + Turkish Lira Sign + + + + List + + + + Alternate List + + + + list-ol + + + + list-ul + + + + location-arrow + + + + lock + + + + Alternate Lock + + + + Lock Open + + + + Alternate Lock Open + + + + Alternate Long Arrow Down + + + + Alternate Long Arrow Left + + + + Alternate Long Arrow Right + + + + Alternate Long Arrow Up + + + + Long Arrow Down + + + + Long Arrow Left + + + + Long Arrow Right + + + + Long Arrow Up + + + + Loveseat + + + + Low Vision + + + + Luchador + + + + Luggage Cart + + + + magic + + + + magnet + + + + Male + + + + Map + + + + Map Marked + + + + Map Marked-alt + + + + map-marker + + + + Alternate Map Marker + + + + Map Pin + + + + Map Signs + + + + Marker + + + + Mars + + + + Mars Double + + + + Mars Stroke + + + + Mars Stroke Horizontal + + + + Mars Stroke Vertical + + + + Medal + + + + medkit + + + + Neutral Face + + + + Face Without Mouth + + + + Face With Rolling Eyes + + + + Memory + + + + Mercury + + + + Microchip + + + + microphone + + + + Alternate Microphone + + + + Alternate Microphone Slash + + + + Microphone Slash + + + + minus + + + + Minus Circle + + + + Minus Hexagon + + + + Minus Octagon + + + + Minus Square + + + + Mobile Phone + + + + Alternate Mobile + + + + Mobile Android + + + + Alternate Mobile Android + + + + Money Bill + + + + Alternate Money Bill + + + + Wavy Money Bill + + + + Alternate Wavy Money Bill + + + + Money Check + + + + Alternate Money Check + + + + Monument + + + + Moon + + + + Mortar Pestle + + + + Motorcycle + + + + Mouse Pointer + + + + Music + + + + Neuter + + + + Newspaper + + + + Not Equal + + + + Medical Notes + + + + Object Group + + + + Object Ungroup + + + + Octagon + + + + Outdent + + + + Paint Brush + + + + Alternate Paint Brush + + + + Paint Roller + + + + Palette + + + + Pallet + + + + Alternate Pallet + + + + Paper Plane + + + + Paperclip + + + + Parachute Box + + + + paragraph + + + + Parking + + + + Passport + + + + Paste + + + + pause + + + + Pause Circle + + + + Paw + + + + Pen + + + + Alternate Pen + + + + Pen Fancy + + + + Pen Nib + + + + Pen Square + + + + pencil + + + + Alternate Pencil + + + + Pencil Ruler + + + + Pennant + + + + People Carry + + + + Percent + + + + Percentage + + + + Person Carry + + + + Person and Dolly + + + + Person and Empty Dolly + + + + Phone + + + + Phone Plus + + + + Phone Slash + + + + Phone Square + + + + Phone Volume + + + + Piggy Bank + + + + Pills + + + + plane + + + + Alternate Plane + + + + Plane Arrival + + + + Plane Departure + + + + play + + + + Play Circle + + + + Plug + + + + plus + + + + Plus Circle + + + + Plus Hexagon + + + + Plus Octagon + + + + Plus Square + + + + Podcast + + + + Poo + + + + Portrait + + + + Pound Sign + + + + Power Off + + + + Prescription + + + + Prescription Bottle + + + + Alternate Prescription Bottle + + + + print + + + + Procedures + + + + Project Diagram + + + + Puzzle Piece + + + + qrcode + + + + Question + + + + Question Circle + + + + Question Square + + + + Quidditch + + + + quote-left + + + + quote-right + + + + Racquet + + + + Ramp Loading + + + + random + + + + Receipt + + + + Landscape Rectangle + + + + Portrait Rectangle + + + + Wide Rectangle + + + + Recycle + + + + Redo + + + + Alternate Redo + + + + Registered Trademark + + + + Repeat + + + + Repeat 1 + + + + Alternate Repeat 1 + + + + Alternate Repeat + + + + Reply + + + + reply-all + + + + Retweet + + + + Alternate Retweet + + + + Ribbon + + + + road + + + + Robot + + + + rocket + + + + Route + + + + rss + + + + RSS Square + + + + Ruble Sign + + + + Ruler + + + + Ruler Combined + + + + Ruler Horizontal + + + + Ruler Vertical + + + + Indian Rupee Sign + + + + Crying Face + + + + Loudly Crying Face + + + + Save + + + + Scanner + + + + Scanner Keyboard + + + + Scanner Touchscreen + + + + School + + + + Screwdriver + + + + Scrubber + + + + Search + + + + Search Minus + + + + Search Plus + + + + Seedling + + + + Server + + + + Share + + + + Share All + + + + Alternate Share + + + + Alternate Share Square + + + + Share Square + + + + Shekel Sign + + + + shield + + + + Alternate Shield + + + + shield + + + + Ship + + + + Shipping Fast + + + + Shipping Timed + + + + Shoe Prints + + + + Shopping Bag + + + + Shopping Basket + + + + shopping-cart + + + + Shower + + + + Shuttle Van + + + + Shuttlecock + + + + Sign + + + + Sign In + + + + Alternate Sign In + + + + Sign Language + + + + Sign Out + + + + Alternate Sign Out + + + + signal + + + + Signature + + + + Sitemap + + + + Skull + + + + Horizontal Sliders + + + + Square Horizontal Sliders + + + + Vertical Sliders + + + + Square Vertical Sliders + + + + Smiling Face + + + + Beaming Face With Smiling Eyes + + + + Smiling Face Plus + + + + Winking Face + + + + Smoking + + + + Smoking Ban + + + + Snowflake + + + + Solar Panel + + + + Sort + + + + Sort Alpha Down + + + + Sort Alpha Up + + + + Sort Amount Down + + + + Sort Amount Up + + + + Sort Down (Descending) + + + + Sort Numeric Down + + + + Sort Numeric Up + + + + Sort Up (Ascending) + + + + Spa + + + + Space Shuttle + + + + Spade + + + + Spinner + + + + Spinner Third + + + + Splotch + + + + Spray Can + + + + Square + + + + Square Full + + + + Stamp + + + + Star + + + + Exclamation Star + + + + star-half + + + + Alternate Star Half + + + + step-backward + + + + step-forward + + + + Stethoscope + + + + Sticky Note + + + + stop + + + + Stop Circle + + + + Stopwatch + + + + Store + + + + Alternate Store + + + + Stream + + + + Street View + + + + Strikethrough + + + + Stroopwafel + + + + subscript + + + + Subway + + + + Suitcase + + + + Suitcase Rolling + + + + Sun + + + + superscript + + + + Hushed Face + + + + Swatchbook + + + + Swimmer + + + + Swimming Pool + + + + Sync + + + + Alternate Sync + + + + Syringe + + + + table + + + + Table Tennis + + + + tablet + + + + Alternate Tablet + + + + Tablet Android + + + + Alternate Tablet Android + + + + Rugged Tablet + + + + Tablets + + + + Tachometer + + + + Alternate Tachometer + + + + tag + + + + tags + + + + Tape + + + + Tasks + + + + Taxi + + + + Tennis Ball + + + + Terminal + + + + text-height + + + + text-width + + + + th + + + + th-large + + + + th-list + + + + Thermometer + + + + Thermometer Empty + + + + Thermometer Full + + + + Thermometer 1/2 Full + + + + Thermometer 1/4 Full + + + + Thermometer 3/4 Full + + + + thumbs-down + + + + thumbs-up + + + + Thumbtack + + + + Ticket + + + + Alternate Ticket + + + + Times + + + + Times Circle + + + + Times Hexagon + + + + Times Octagon + + + + Times Square + + + + tint + + + + Tint Slash + + + + Tired Face + + + + Toggle Off + + + + Toggle On + + + + Toolbox + + + + Tooth + + + + Trademark + + + + Train + + + + Transgender + + + + Alternate Transgender + + + + Trash + + + + Alternate Trash + + + + Tree + + + + Alternate Tree + + + + Triangle + + + + trophy + + + + Alternate Trophy + + + + truck + + + + Truck Container + + + + Truck Couch + + + + Truck Loading + + + + Truck Moving + + + + Truck Ramp + + + + T-Shirt + + + + TTY + + + + Television + + + + Retro Televison + + + + Umbrella + + + + Umbrella Beach + + + + Underline + + + + Undo + + + + Alternate Undo + + + + Universal Access + + + + University + + + + unlink + + + + unlock + + + + Alternate Unlock + + + + Upload + + + + US Dollar Circle + + + + US Dollar Square + + + + User + + + + Alternate User + + + + Alternate User Slash + + + + User Astronaut + + + + User Check + + + + User Circle + + + + User Clock + + + + User Cog + + + + User Edit + + + + User Friends + + + + User Graduate + + + + User Lock + + + + user-md + + + + User Minus + + + + User Ninja + + + + Add User + + + + User Secret + + + + User Shield + + + + User Slash + + + + User Tag + + + + User Tie + + + + Remove User + + + + Users + + + + Users Cog + + + + Utensil Fork + + + + Utensil Knife + + + + Utensil Spoon + + + + Utensils + + + + Alternate Utensils + + + + Vector Square + + + + Venus + + + + Venus Double + + + + Venus Mars + + + + Vial + + + + Vials + + + + Video + + + + Video Plus + + + + Video Slash + + + + Volleyball Ball + + + + volume-down + + + + volume-mute + + + + volume-off + + + + volume-up + + + + Walking + + + + Wallet + + + + Warehouse + + + + Alternate Warehouse + + + + Watch + + + + Weight + + + + Hanging Weight + + + + Wheelchair + + + + Whistle + + + + WiFi + + + + Window + + + + Alternate Window + + + + Window Close + + + + Window Maximize + + + + Window Minimize + + + + Window Restore + + + + Wine Glass + + + + Wine Glass-alt + + + + Won Sign + + + + Wrench + + + + X-Ray + + + + Yen Sign + + + diff --git a/packages/gallery/src/interface/allImages.js b/packages/gallery/src/interface/allImages.js index dbef772..971d4d9 100644 --- a/packages/gallery/src/interface/allImages.js +++ b/packages/gallery/src/interface/allImages.js @@ -65,7 +65,9 @@ export function AllImagesView(vm, params) { }), [containerScrollTop, sections] ); - const appBarUp = computed(s => (s ? { name: 'x', action: deSelect } : undefined), [selectMode]); + const appBarUp = computed(s => (s ? { name: 'minus-circle', action: deSelect } : undefined), [ + selectMode + ]); const appBarActions = computed( s => s @@ -76,7 +78,7 @@ export function AllImagesView(vm, params) { }, [ Icon({ - name: 'trash', + name: 'trash-alt', size: 0.75 }) ] @@ -92,7 +94,7 @@ export function AllImagesView(vm, params) { }, [ Icon({ - name: 'upload', + name: 'cloud-upload', size: 0.75, title: 'Upload' }) @@ -226,16 +228,16 @@ export function AllImagesView(vm, params) { [ el('h1', 'Welcome'), el('p', [ - 'To get started, drag some photos from your desktop or click on the ', + 'To get started, drag some photos from your desktop or click on the', el( 'label', { for: 'uploadButton', - style: Object.assign({ margin: '0px 3px' }, CLICKABLE) + style: Object.assign({ margin: '0px 6px' }, CLICKABLE) }, [ Icon({ - name: 'upload', + name: 'cloud-upload', size: 0.75, title: 'Upload', style: { verticalAlign: 'middle' } diff --git a/packages/gallery/src/interface/components/appbar.js b/packages/gallery/src/interface/components/appbar.js index e911233..2143aa5 100644 --- a/packages/gallery/src/interface/components/appbar.js +++ b/packages/gallery/src/interface/components/appbar.js @@ -29,7 +29,7 @@ export function AppBar(params) { Icon( Object.assign( { - name: up.button || 'arrow_left', + name: up.button || 'arrow-left', size: 0.75, style: { verticalAlign: 'middle' } }, diff --git a/packages/gallery/src/interface/components/icon.js b/packages/gallery/src/interface/components/icon.js index 01dd457..f5e17b6 100644 --- a/packages/gallery/src/interface/components/icon.js +++ b/packages/gallery/src/interface/components/icon.js @@ -1,51 +1,10 @@ -import { defineElement as el, defineSvgElement as sv } from '../../utils/domvm.js'; - -const ICON_PATHS = { - check_circle: [ - '27 32', - 'M22.93 13.107q0-.5-.322-.82l-1.625-1.608q-.34-.34-.804-.34t-.807.34l-7.286 7.265L8.05 13.91q-.34-.338-.803-.338t-.805.34L4.82 15.517q-.32.32-.32.82 0 .483.32.805l6.464 6.464q.34.34.804.34.482 0 .82-.34l9.697-9.696q.32-.32.32-.803zM27.43 16q0 3.732-1.84 6.884t-4.99 4.99-6.885 1.84-6.884-1.84-4.99-4.99T0 16t1.84-6.884 4.99-4.99 6.885-1.84 6.884 1.84 4.99 4.99T27.43 16z' - ], - circle_o: [ - '32 32', - 'M13.714 6.286q-2.643 0-4.875 1.304T5.3 11.126 4 16t1.303 4.876 3.536 3.536 4.872 1.304 4.875-1.304 3.535-3.536T23.43 16t-1.305-4.874T18.59 7.59t-4.876-1.304zM27.43 16q0 3.732-1.84 6.884t-4.99 4.99-6.885 1.84-6.884-1.84-4.99-4.99T0 16t1.84-6.884 4.99-4.99 6.885-1.84 6.884 1.84 4.99 4.99T27.43 16z' - ], - upload: [ - '34 32', - 'M22.857 15.429q0-0.25-0.161-0.411l-6.286-6.286q-0.161-0.161-0.411-0.161t-0.411 0.161l-6.268 6.268q-0.179 0.214-0.179 0.429 0 0.25 0.161 0.411t0.411 0.161h4v6.286q0 0.232 0.17 0.402t0.402 0.17h3.429q0.232 0 0.402-0.17t0.17-0.402v-6.286h4q0.232 0 0.402-0.17t0.17-0.402zM34.286 20.571q0 2.839-2.009 4.848t-4.848 2.009h-19.429q-3.304 0-5.652-2.348t-2.348-5.652q0-2.321 1.25-4.286t3.357-2.946q-0.036-0.536-0.036-0.768 0-3.786 2.679-6.464t6.464-2.679q2.786 0 5.098 1.554t3.366 4.125q1.268-1.107 2.964-1.107 1.893 0 3.232 1.339t1.339 3.232q0 1.357-0.732 2.464 2.321 0.554 3.813 2.42t1.491 4.259z' - ], - trash: [ - '32 32', - 'M9.143 13.143v10.286q0 0.25-0.161 0.411t-0.411 0.161h-1.143q-0.25 0-0.411-0.161t-0.161-0.411v-10.286q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM13.714 13.143v10.286q0 0.25-0.161 0.411t-0.411 0.161h-1.143q-0.25 0-0.411-0.161t-0.161-0.411v-10.286q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM18.286 13.143v10.286q0 0.25-0.161 0.411t-0.411 0.161h-1.143q-0.25 0-0.411-0.161t-0.161-0.411v-10.286q0-0.25 0.161-0.411t0.411-0.161h1.143q0.25 0 0.411 0.161t0.161 0.411zM20.571 26.071v-16.929h-16v16.929q0 0.393 0.125 0.723t0.259 0.482 0.188 0.152h14.857q0.054 0 0.188-0.152t0.259-0.482 0.125-0.723zM8.571 6.857h8l-0.857-2.089q-0.125-0.161-0.304-0.196h-5.661q-0.179 0.036-0.304 0.196zM25.143 7.429v1.143q0 0.25-0.161 0.411t-0.411 0.161h-1.714v16.929q0 1.482-0.839 2.563t-2.018 1.080h-14.857q-1.179 0-2.018-1.045t-0.839-2.527v-17h-1.714q-0.25 0-0.411-0.161t-0.161-0.411v-1.143q0-0.25 0.161-0.411t0.411-0.161h5.518l1.25-2.982q0.268-0.661 0.964-1.125t1.411-0.464h5.714q0.714 0 1.411 0.464t0.964 1.125l1.25 2.982h5.518q0.25 0 0.411 0.161t0.161 0.411z' - ], - arrow_left: [ - '32 32', - 'M12.586 27.414l-10-10c-0.781-0.781-0.781-2.047 0-2.828l10-10c0.781-0.781 2.047-0.781 2.828 0s0.781 2.047 0 2.828l-6.586 6.586h19.172c1.105 0 2 0.895 2 2s-0.895 2-2 2h-19.172l6.586 6.586c0.39 0.39 0.586 0.902 0.586 1.414s-0.195 1.024-0.586 1.414c-0.781 0.781-2.047 0.781-2.828 0z' - ], - chevron_left: [ - '24 32', - 'M20.911 5.375l-9.482 9.482 9.482 9.482q0.339 0.339 0.339 0.804t-0.339 0.804l-2.964 2.964q-0.339 0.339-0.804 0.339t-0.804-0.339l-13.25-13.25q-0.339-0.339-0.339-0.804t0.339-0.804l13.25-13.25q0.339-0.339 0.804-0.339t0.804 0.339l2.964 2.964q0.339 0.339 0.339 0.804t-0.339 0.804z' - ], - chevron_right: [ - '22 32', - 'M19.768 15.661l-13.25 13.25q-0.339 0.339-0.804 0.339t-0.804-0.339l-2.964-2.964q-0.339-0.339-0.339-0.804t0.339-0.804l9.482-9.482-9.482-9.482q-0.339-0.339-0.339-0.804t0.339-0.804l2.964-2.964q0.339-0.339 0.804-0.339t0.804 0.339l13.25 13.25q0.339 0.339 0.339 0.804t-0.339 0.804z' - ], - x: [ - '24 24', - 'M18.984 6.422l-5.578 5.578 5.578 5.578-1.406 1.406-5.578-5.578-5.578 5.578-1.406-1.406 5.578-5.578-5.578-5.578 1.406-1.406 5.578 5.578 5.578-5.578z' - ], - unknown: [ - '32 32', - 'M12 6c2.203 0 3.984 1.781 3.984 3.984 0 2.484-3 2.766-3 5.016h-1.969c0-3.234 3-3 3-5.016 0-1.078-0.938-1.969-2.016-1.969s-2.016 0.891-2.016 1.969h-1.969c0-2.203 1.781-3.984 3.984-3.984zM12 20.016c4.406 0 8.016-3.609 8.016-8.016s-3.609-8.016-8.016-8.016-8.016 3.609-8.016 8.016 3.609 8.016 8.016 8.016zM12 2.016c5.531 0 9.984 4.453 9.984 9.984s-4.453 9.984-9.984 9.984-9.984-4.453-9.984-9.984 4.453-9.984 9.984-9.984zM11.016 18v-2.016h1.969v2.016h-1.969z' - ] -}; - -// const sizeBasis = 24; +import { defineSvgElement as sv, injectElement as iv } from '../../utils/domvm.js'; +import spriteSVGURL from '../../assets/fa-pro-light.svg'; export function Icon(params) { const { name, size } = params; const attrs = Object.assign({}, params); const _size = (size || 1) + 1; - const [boxBounds, path] = ICON_PATHS[name] || ICON_PATHS.unknown; delete attrs.name; delete attrs.size; @@ -60,6 +19,6 @@ export function Icon(params) { }, attrs ), - [sv('svg', { viewBox: `0 0 ${boxBounds}` }, [sv('path', { d: path })])] + [sv('use', { href: spriteSVGURL + '#' + name })] ); } diff --git a/packages/gallery/src/interface/focus.js b/packages/gallery/src/interface/focus.js index 3503fe7..92607b7 100644 --- a/packages/gallery/src/interface/focus.js +++ b/packages/gallery/src/interface/focus.js @@ -171,7 +171,7 @@ export function FocusView(vm, params) { }, [ Icon({ - name: 'trash', + name: 'trash-alt', size: 0.75, fill: 'white', style: { verticalAlign: 'middle' } @@ -184,7 +184,7 @@ export function FocusView(vm, params) { prevLink() ? prevClickZone({ href: prevLink() }, [ Icon({ - name: 'chevron_left', + name: 'chevron-left', size: 0.75, fill: 'white' }) @@ -197,7 +197,7 @@ export function FocusView(vm, params) { nextLink() ? nextClickZone({ href: nextLink() }, [ Icon({ - name: 'chevron_right', + name: 'chevron-right', size: 0.75, fill: 'white' }) diff --git a/packages/gallery/src/interface/gallery.js b/packages/gallery/src/interface/gallery.js index 27d8aad..64eef9c 100644 --- a/packages/gallery/src/interface/gallery.js +++ b/packages/gallery/src/interface/gallery.js @@ -46,7 +46,7 @@ export function GalleryView(vm) { return [ Overlay([ Icon({ - name: 'upload', + name: 'cloud-upload', size: 4 }), el('h1', 'Drop pictures here to upload to your gallery') diff --git a/packages/gallery/src/interface/sectionPhoto.js b/packages/gallery/src/interface/sectionPhoto.js index 2597209..ff8ed53 100644 --- a/packages/gallery/src/interface/sectionPhoto.js +++ b/packages/gallery/src/interface/sectionPhoto.js @@ -65,7 +65,7 @@ export function SectionPhoto({ }, [ Icon({ - name: selectMode && !isSelected && !hovered ? 'circle_o' : 'check_circle', + name: selectMode && !isSelected && !hovered ? 'circle' : 'check-circle', size: 0.75, fill: isSelected ? '#00C800' : '#fff' }) diff --git a/packages/gallery/src/interface/sectionView.js b/packages/gallery/src/interface/sectionView.js index 7355c00..56d49a7 100644 --- a/packages/gallery/src/interface/sectionView.js +++ b/packages/gallery/src/interface/sectionView.js @@ -109,7 +109,7 @@ export function SectionView(vm, params, key) { opacity: selectMode ? 0.7 : 0 } }, - [Icon({ name: 'check_circle', size: 0.25 })] + [Icon({ name: 'check-circle', size: 0.25 })] ) ]), sectionContent(sections().map(sectionRowTemplate))