From c9b936a57ecf5c2993dd4e638b3d0a1ce2646149 Mon Sep 17 00:00:00 2001
From: Ross Moody <fiftyfivehis@gmail.com>
Date: Sun, 29 Aug 2021 11:16:48 -0700
Subject: [PATCH] Version 3.9 (#114)

* localization setup

* Update image-modal.tsx

* localization strings

* update

* update

* Update package.json
---
 extension/_locales/en/messages.json           | 419 ++++++++++++++++++
 extension/manifest.json                       |   7 +-
 package.json                                  |   2 +-
 .../components/card/card-action-cors.tsx      |   3 +-
 .../components/card/card-action-footer.tsx    |  12 +-
 .../components/card/card-action-menu.tsx      |  15 +-
 src/build/components/card/card-footer.tsx     |   6 +-
 .../components/drawer/code-view-header.tsx    |   8 +-
 .../components/drawer/drawer-content.tsx      |   5 +-
 src/build/components/drawer/index.tsx         |   4 +-
 .../drawer/svgo/quick-configurations.tsx      |   9 +-
 .../components/drawer/svgo/svgo-plugins.ts    | 169 ++++---
 src/build/components/footer/copyright.tsx     |  30 +-
 .../components/footer/social-media-links.tsx  |   8 +-
 src/build/components/gallery/data-gallery.tsx |   5 +-
 .../components/gallery/empty-gallery.tsx      |   4 +-
 src/build/components/gallery/index.tsx        |  15 +-
 src/build/components/index.ts                 |   2 +
 .../components/modals/filename-modal.tsx      |   8 +-
 src/build/components/modals/image-modal.tsx   |  22 +-
 src/build/components/navbar/index.tsx         |   4 +-
 src/build/components/navbar/theme-toggle.tsx  |   4 +-
 src/build/components/toolbar/data-toolbar.tsx |   9 +-
 src/build/components/utils/localization.ts    |   7 +
 24 files changed, 606 insertions(+), 171 deletions(-)
 create mode 100644 extension/_locales/en/messages.json
 create mode 100644 src/build/components/utils/localization.ts

diff --git a/extension/_locales/en/messages.json b/extension/_locales/en/messages.json
new file mode 100644
index 00000000..d31f12b5
--- /dev/null
+++ b/extension/_locales/en/messages.json
@@ -0,0 +1,419 @@
+{
+  "appName": {
+    "message": "SVG Gobbler"
+  },
+  "appDesc": {
+    "message": "Download and optimize icons, logos, and vector SVGs."
+  },
+  "nav_fb": {
+    "message": "Send feedback"
+  },
+  "nav_theme": {
+    "message": "Theme toggle"
+  },
+  "toolbar_qty": {
+    "message": "available SVG"
+  },
+  "toolbar_download": {
+    "message": "Download all"
+  },
+  "toolbar_tooltip": {
+    "message": "Drop SVGs anywhere on this page to upload"
+  },
+  "toolbar_upload": {
+    "message": "Upload"
+  },
+  "gallery_load": {
+    "message": "Loading SVGs"
+  },
+  "gallery_show": {
+    "message": "Show more"
+  },
+  "gallery_upload": {
+    "message": "Upload SVG"
+  },
+  "gallery_noAvailTitle": {
+    "message": "No available SVGs to gobble"
+  },
+  "gallery_noAvailDesc": {
+    "message": "Upload your own SVGs to this page to optimize them using SVGO"
+  },
+  "gallery_uploadTitle": {
+    "message": "Upload an SVG"
+  },
+  "gallery_uploadDesc": {
+    "message": "Upload SVGs onto this page to optimize"
+  },
+  "gallery_errorTitle": {
+    "message": "Shucks, something went wrong"
+  },
+  "gallery_errorDesc": {
+    "message": "Close this page and give it another try or upload your own SVGs"
+  },
+  "modals_save": {
+    "message": "Save"
+  },
+  "modals_filename": {
+    "message": "Filename"
+  },
+  "modals_fileType": {
+    "message": ".svg"
+  },
+  "modals_fileType_png": {
+    "message": ".png"
+  },
+  "modals_exportImage": {
+    "message": "Export image"
+  },
+  "modals_height": {
+    "message": "Height"
+  },
+  "modals_width": {
+    "message": "Width"
+  },
+  "modals_px": {
+    "message": "px"
+  },
+  "footer_title": {
+    "message": "SVG Gobbler is an open source initiative by "
+  },
+  "footer_titleName": {
+    "message": "Ross Moody"
+  },
+  "footer_desc": {
+    "message": "If you find it helpful, please leave a review on the "
+  },
+  "footer_portfolio": {
+    "message": "https://rossmoody.com/"
+  },
+  "footer_or": {
+    "message": "or "
+  },
+  "footer_chrome": {
+    "message": "Chrome Web Store"
+  },
+  "footer_chromeLink": {
+    "message": "https://chrome.google.com/webstore/detail/svg-gobbler/mpbmflcodadhgafbbakjeahpandgcbch?hl=en"
+  },
+  "footer_firefox": {
+    "message": "Firefox Addon Marketplace"
+  },
+  "footer_firefoxLink": {
+    "message": "https://addons.mozilla.org/en-US/firefox/addon/svg-gobbler/"
+  },
+  "footer_twitter": {
+    "message": "http://www.twitter.com/_rossmoody"
+  },
+  "footer_github": {
+    "message": "https://github.com/rossmoody/svg-gobbler"
+  },
+  "drawer_details": {
+    "message": "Code details"
+  },
+  "drawer_labelNone": {
+    "message": "None"
+  },
+  "drawer_labelSvgo": {
+    "message": "SVGO default"
+  },
+  "drawer_labelCustom": {
+    "message": "Custom"
+  },
+  "drawer_quick": {
+    "message": "Quick configuration"
+  },
+  "drawer_optim": {
+    "message": "Optimizations"
+  },
+  "drawer_svg": {
+    "message": "SVG"
+  },
+  "drawer_react": {
+    "message": "React"
+  },
+  "drawer_copy": {
+    "message": "Copy"
+  },
+  "card_open": {
+    "message": "Open in new tab"
+  },
+  "card_copy_title": {
+    "message": "Copied to clipboard"
+  },
+  "card_copy_desc": {
+    "message": "The SVG has been copied to your clipboard and is ready to be pasted."
+  },
+  "card_copy_action": {
+    "message": "Copy"
+  },
+  "card_dl_orig": {
+    "message": "Download original"
+  },
+  "card_dl_opt": {
+    "message": "Download optimized"
+  },
+  "card_menu_exportPng": {
+    "message": "Export as PNG…"
+  },
+  "card_menu_viewCode": {
+    "message": "View code…"
+  },
+  "card_menu_dl_opt": {
+    "message": "Download optimized"
+  },
+  "card_menu_copy_opt": {
+    "message": "Copy optimized"
+  },
+  "card_menu_toast_optTitle": {
+    "message": "Copied to clipboard"
+  },
+  "card_menu_toast_optDesc": {
+    "message": "The SVG has been successfully optimized using SVGO's default settings and is available in your clipboard."
+  },
+  "card_menu_type": {
+    "message": "type"
+  },
+  "card_menu_size": {
+    "message": "Size"
+  },
+  "svgo_title_beaut": {
+    "message": "Beautify markup"
+  },
+  "svgo_desc_beaut": {
+    "message": "Format and indent markup"
+  },
+  "svgo_title_cleanAtt": {
+    "message": "Cleanup attributes"
+  },
+  "svgo_desc_cleanAtt": {
+    "message": "Cleanup attributes from new lines, trailing, and repeating spaces"
+  },
+  "svgo_title_cleanBg": {
+    "message": "Cleanup enable-background"
+  },
+  "svgo_desc_cleanBg": {
+    "message": "Remove or cleanup enable-background attribute when it coincides with width and height"
+  },
+  "svgo_title_cleanId": {
+    "message": "Cleanup id attributes"
+  },
+  "svgo_desc_cleanId": {
+    "message": "Remove unused and minify used IDs"
+  },
+  "svgo_title_cleanNum": {
+    "message": "Cleanup numeric values"
+  },
+  "svgo_desc_cleanNum": {
+    "message": "Round numeric values to the fixed precision and remove default px units"
+  },
+  "svgo_title_coll": {
+    "message": "Collapse groups"
+  },
+  "svgo_desc_coll": {
+    "message": "Collapse redundant groups"
+  },
+  "svgo_title_convCol": {
+    "message": "Convert colors"
+  },
+  "svgo_desc_convCol": {
+    "message": "Convert colors from rgb() to #rrggbb and #rrggbb to #rgb)"
+  },
+  "svgo_title_convEllip": {
+    "message": "Convert ellipsis to circle"
+  },
+  "svgo_desc_convEllip": {
+    "message": "Convert non-eccentric <ellipse> to <circle>"
+  },
+  "svgo_title_convPath": {
+    "message": "Convert path data"
+  },
+  "svgo_desc_convPath": {
+    "message": "Convert and optimize path data to relative or absolute - whichever is shorter"
+  },
+  "svgo_title_convShape": {
+    "message": "Convert shape to path"
+  },
+  "svgo_desc_convShape": {
+    "message": "Optimize and combine basic shapes to <path>"
+  },
+  "svgo_title_convTran": {
+    "message": "Convert transform"
+  },
+  "svgo_desc_convTran": {
+    "message": "Collapse multiple transforms into one"
+  },
+  "svgo_title_inl": {
+    "message": "Inline styles"
+  },
+  "svgo_desc_inl": {
+    "message": "Move and merge styles from <style> elements to element style attributes"
+  },
+  "svgo_title_mergePath": {
+    "message": "Merge paths"
+  },
+  "svgo_desc_mergePath": {
+    "message": "Merge multiple paths into one"
+  },
+  "svgo_title_mergeStyle": {
+    "message": "Merge styles"
+  },
+  "svgo_desc_mergeStyle": {
+    "message": "Merge multiple style elements into one"
+  },
+  "svgo_title_minStyles": {
+    "message": "Minify styles"
+  },
+  "svgo_desc_minStyles": {
+    "message": "Minify <style> elements with CSSO minifier"
+  },
+  "svgo_title_moveEl": {
+    "message": "Move element attributes to group"
+  },
+  "svgo_desc_moveEl": {
+    "message": "Move element attributes to their enclosing group"
+  },
+  "svgo_title_moveGroup": {
+    "message": "Move group attributes to elements"
+  },
+  "svgo_desc_moveGroup": {
+    "message": "Move group attributes to the contained elements"
+  },
+  "svgo_title_prefixId": {
+    "message": "Prefix id and class"
+  },
+  "svgo_desc_prefixId": {
+    "message": "Prefix IDs and classes with the SVG filename or an arbitrary string"
+  },
+  "svgo_title_removeComm": {
+    "message": "Remove comments"
+  },
+  "svgo_desc_removeComm": {
+    "message": "Remove comments inside the markup"
+  },
+  "svgo_title_removeDesc": {
+    "message": "Remove description"
+  },
+  "svgo_desc_removeDesc": {
+    "message": "Remove <desc> and content within"
+  },
+  "svgo_title_removeDim": {
+    "message": "Remove dimensions"
+  },
+  "svgo_desc_removeDim": {
+    "message": "Remove width/height and add viewBox if it's missing"
+  },
+  "svgo_title_removeDoc": {
+    "message": "Remove doctype"
+  },
+  "svgo_desc_removeDoc": {
+    "message": "Remove doctype declaration"
+  },
+  "svgo_title_removeEdit": {
+    "message": "Remove editor namespace data"
+  },
+  "svgo_desc_removeEdit": {
+    "message": "Remove editor namespaces, elements, and attributes"
+  },
+  "svgo_title_removeEmptyAtt": {
+    "message": "Remove empty attributes"
+  },
+  "svgo_desc_removeEmptyAtt": {
+    "message": "Remove empty attributes"
+  },
+  "svgo_title_removeCont": {
+    "message": "Remove empty containers"
+  },
+  "svgo_desc_removeCont": {
+    "message": "Remove empty containers elements"
+  },
+  "svgo_title_removeText": {
+    "message": "Remove empty text"
+  },
+  "svgo_desc_removeText": {
+    "message": "Remove empty text elements"
+  },
+  "svgo_title_removeHidden": {
+    "message": "Remove hidden elements"
+  },
+  "svgo_desc_removeHidden": {
+    "message": "Remove hiddent elements with disabled rendering"
+  },
+  "svgo_title_removeMeta": {
+    "message": "Remove metadata"
+  },
+  "svgo_desc_removeMeta": {
+    "message": "Remove <metadata> content within the markup"
+  },
+  "svgo_title_removeNon": {
+    "message": "Remove non-inheritable attributes"
+  },
+  "svgo_desc_removeNon": {
+    "message": "Remove non-inheritable group's \"presentation\" attributes"
+  },
+  "svgo_title_removeRaster": {
+    "message": "Remove raster images"
+  },
+  "svgo_desc_removeRaster": {
+    "message": "Remove raster images from within the markup"
+  },
+  "svgo_title_removeTitle": {
+    "message": "Remove title"
+  },
+  "svgo_desc_removeTitle": {
+    "message": "Remove <title> declaration"
+  },
+  "svgo_title_removeUnk": {
+    "message": "Remove unknown elements and defaults"
+  },
+  "svgo_desc_removeUnk": {
+    "message": "Remove unknown elements and remove attributes with default values"
+  },
+  "svgo_title_removeUnuse": {
+    "message": "Remove unused namespace"
+  },
+  "svgo_desc_removeUnuse": {
+    "message": "Remove unused namespaces declaration"
+  },
+  "svgo_title_removeUselessDef": {
+    "message": "Remove useless defs"
+  },
+  "svgo_desc_removeUselessDef": {
+    "message": "Remove elements inside <defs> without id"
+  },
+  "svgo_title_removeUselessStr": {
+    "message": "Remove useless stroke and fill"
+  },
+  "svgo_desc_removeUselessStr": {
+    "message": "Remove useless stroke and fill attributes"
+  },
+  "svgo_title_removeView": {
+    "message": "Remove viewBox attribute"
+  },
+  "svgo_desc_removeView": {
+    "message": "Remove viewBox attribute when it coincides with width and height attributes"
+  },
+  "svgo_title_removeXml": {
+    "message": "Remove XML instructions"
+  },
+  "svgo_desc_removeXml": {
+    "message": "Remove XML processing instructions"
+  },
+  "svgo_title_removeXmlAtt": {
+    "message": "Remove XMLNS attribute"
+  },
+  "svgo_desc_removeXmlAtt": {
+    "message": "Remove the xmlns attribute for inline SVG"
+  },
+  "svgo_title_sortAttr": {
+    "message": "Sort attributes"
+  },
+  "svgo_desc_sortAttr": {
+    "message": "Sort element attributes alphabetically"
+  },
+  "svgo_title_sortDefs": {
+    "message": "Sort defs children"
+  },
+  "svgo_desc_sortDefs": {
+    "message": "Sort children of <defs> in order to improve compression"
+  }
+}
diff --git a/extension/manifest.json b/extension/manifest.json
index 5bd43b19..250932a4 100644
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -1,8 +1,9 @@
 {
+  "name": "__MSG_appName__",
+  "description": "__MSG_appDesc__",
+  "default_locale": "en",
   "manifest_version": 2,
-  "name": "SVG Gobbler",
-  "version": "3.8.3",
-  "description": "Download and optimize icons, logos, and vector SVGs.",
+  "version": "3.9.0",
   "homepage_url": "https://github.com/rossmoody/svg-gobbler",
   "icons": {
     "16": "icons/icon16.png",
diff --git a/package.json b/package.json
index 4b8491b2..aa3a4264 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svg-gobbler",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "author": "rossmoody <ross@rossmoody.com>",
   "description": "Download and optimize icons, logos, and vector SVGs.",
   "license": "apache-2.0",
diff --git a/src/build/components/card/card-action-cors.tsx b/src/build/components/card/card-action-cors.tsx
index e0d6c722..bf8b8bb5 100644
--- a/src/build/components/card/card-action-cors.tsx
+++ b/src/build/components/card/card-action-cors.tsx
@@ -3,6 +3,7 @@ import { Button, Grid, useColorModeValue } from '@chakra-ui/react'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
 import Tooltip from '../generic/tooltip'
+import loc from '../utils/localization'
 
 function sendMessage(callback: any) {
   chrome.tabs.query({ active: true, currentWindow: true }, (tabArray) => {
@@ -67,7 +68,7 @@ const CardActionCors = ({ forwardingUrl }: { forwardingUrl: string }) => {
           onClick={() => handleCorsTab(forwardingUrl)}
           rightIcon={<FaExternalLinkAlt />}
         >
-          Open in new tab
+          {loc('card_open')}
         </Button>
       </Tooltip>
     </Grid>
diff --git a/src/build/components/card/card-action-footer.tsx b/src/build/components/card/card-action-footer.tsx
index 6ae39215..28fd81f6 100644
--- a/src/build/components/card/card-action-footer.tsx
+++ b/src/build/components/card/card-action-footer.tsx
@@ -5,6 +5,7 @@ import Drawer from '../drawer'
 import FilenameModal from '../modals/filename-modal'
 import ImageModal from '../modals/image-modal'
 import handle from '../utils/actions'
+import loc from '../utils/localization'
 
 import CardActionMenu from './card-action-menu'
 
@@ -48,13 +49,12 @@ const CardActionFooter = ({
         onClick={() => {
           handle.copyToClipboard(svgString)
           toast({
-            title: 'Copied to clipboard',
-            description:
-              'The SVG has been copied to your clipboard and is ready to be pasted.',
+            title: loc('card_copy_title'),
+            description: loc('card_copy_desc'),
           })
         }}
       >
-        Copy
+        {loc('card_copy_action')}
       </Button>
 
       <CardActionMenu
@@ -65,7 +65,7 @@ const CardActionFooter = ({
       />
 
       <FilenameModal
-        title="Download original"
+        title={loc('card_dl_orig')}
         download={handle.downloadOriginal}
         svgString={svgString}
         callback={setShowOgModal}
@@ -73,7 +73,7 @@ const CardActionFooter = ({
       />
 
       <FilenameModal
-        title="Download optimized"
+        title={loc('card_dl_opt')}
         download={handle.downloadOptimized}
         svgString={svgString}
         callback={setShowOptimizedModal}
diff --git a/src/build/components/card/card-action-menu.tsx b/src/build/components/card/card-action-menu.tsx
index d2fe1f39..bb549f13 100644
--- a/src/build/components/card/card-action-menu.tsx
+++ b/src/build/components/card/card-action-menu.tsx
@@ -17,6 +17,7 @@ import {
 } from 'react-icons/fi'
 
 import handle from '../utils/actions'
+import loc from '../utils/localization'
 
 interface CardActionMenu {
   setShowOptimizedModal: any
@@ -51,7 +52,7 @@ const CardActionMenu = ({
           icon={<FiDownload />}
           onClick={() => setShowOptimizedModal(true)}
         >
-          Download optimized
+          {loc('card_dl_opt')}
         </MenuItem>
 
         <MenuItem
@@ -59,24 +60,24 @@ const CardActionMenu = ({
           onClick={() => {
             handle.copyOptimized(svgString)
             toast({
-              title: 'Copied to clipboard',
-              description:
-                "The SVG has been successfully optimized using SVGO's default settings and is available in your clipboard.",
+              title: loc('card_menu_toast_optTitle'),
+              description: loc('card_menu_toast_optDesc'),
             })
           }}
         >
-          Copy optimized
+          {loc('card_menu_copy_opt')}
         </MenuItem>
 
         <MenuDivider />
 
         <MenuItem icon={<FiImage />} onClick={() => setShowModal(true)}>
-          Export as PNG…
+          {loc('card_menu_exportPng')}
         </MenuItem>
 
         <MenuDivider />
+
         <MenuItem icon={<FiCode />} onClick={() => setShowDrawer(true)}>
-          View code…
+          {loc('card_menu_viewCode')}
         </MenuItem>
       </MenuList>
     </Menu>
diff --git a/src/build/components/card/card-footer.tsx b/src/build/components/card/card-footer.tsx
index ff2b2a7b..ee5134ab 100644
--- a/src/build/components/card/card-footer.tsx
+++ b/src/build/components/card/card-footer.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { Box, SimpleGrid } from '@chakra-ui/react'
 
+import loc from '../utils/localization'
+
 import Subhead from './card-footer-subhead'
 import Body from './card-footer-body'
 
@@ -13,11 +15,11 @@ const CardFooter = ({ size, type }: CardFooter) => {
   return (
     <SimpleGrid minChildWidth="30px" spacing={2}>
       <Box>
-        <Subhead>Type</Subhead>
+        <Subhead>{loc('card_menu_type')}</Subhead>
         <Body>{type.charAt(0).toUpperCase() + type.slice(1)}</Body>
       </Box>
       <Box>
-        <Subhead>Size</Subhead>
+        <Subhead>{loc('card_menu_size')}</Subhead>
         <Body>{size}</Body>
       </Box>
     </SimpleGrid>
diff --git a/src/build/components/drawer/code-view-header.tsx b/src/build/components/drawer/code-view-header.tsx
index d25f5f40..fe9d7a9c 100644
--- a/src/build/components/drawer/code-view-header.tsx
+++ b/src/build/components/drawer/code-view-header.tsx
@@ -9,6 +9,8 @@ import {
 } from '@chakra-ui/react'
 import prettyBytes from 'pretty-bytes'
 
+import loc from '../utils/localization'
+
 const getStringSize = (string: string) => {
   const bytes = new Blob([string]).size
   return prettyBytes(bytes)
@@ -44,7 +46,7 @@ function CodeViewHeader({
               onClick={() => setIsReact(false)}
               variant="outline"
             >
-              SVG
+              {loc('drawer_svg')}
             </Button>
             <Button
               size="xs"
@@ -52,7 +54,7 @@ function CodeViewHeader({
               onClick={() => setIsReact(true)}
               variant="outline"
             >
-              React
+              {loc('drawer_react')}
             </Button>
           </ButtonGroup>
         </Box>
@@ -71,7 +73,7 @@ function CodeViewHeader({
           }, 1500)
         }}
       >
-        Copy
+        {loc('drawer_copy')}
       </Button>
     </Flex>
   )
diff --git a/src/build/components/drawer/drawer-content.tsx b/src/build/components/drawer/drawer-content.tsx
index 31fec667..0ccb79db 100644
--- a/src/build/components/drawer/drawer-content.tsx
+++ b/src/build/components/drawer/drawer-content.tsx
@@ -9,6 +9,7 @@ import {
 } from '@chakra-ui/react'
 
 import { SVGOConfig } from '../../types'
+import loc from '../utils/localization'
 
 import { SVGHighlighter } from './syntax-highlighter'
 import { runSvgo, defaultConfig } from './svgo/svgo-configs'
@@ -88,14 +89,14 @@ function DrawerContent({ svgString }: DrawerContent) {
               overflow="auto"
             >
               <Box px={5} paddingTop={4} paddingBottom={6} marginBottom={12}>
-                <Subhead>Quick Configuration</Subhead>
+                <Subhead>{loc('drawer_quick')}</Subhead>
                 <QuickConfiguration
                   setConfig={setConfig}
                   setRadioGroup={setRadioGroup}
                   radioGroup={radioGroup}
                 />
                 <Divider my={8} />
-                <Subhead>Optimizations</Subhead>
+                <Subhead>{loc('drawer_optim')}</Subhead>
                 <Stack spacing="4">
                   {optionsData.map((option) => (
                     <Option
diff --git a/src/build/components/drawer/index.tsx b/src/build/components/drawer/index.tsx
index 024ee60c..dd2716d1 100644
--- a/src/build/components/drawer/index.tsx
+++ b/src/build/components/drawer/index.tsx
@@ -8,6 +8,8 @@ import {
   Divider,
 } from '@chakra-ui/react'
 
+import loc from '../utils/localization'
+
 import { DrawerContent as DrawerCodeContent } from './drawer-content'
 
 interface CodeDrawer {
@@ -29,7 +31,7 @@ function CodeDrawer({ callback, svgString, showDrawer }: CodeDrawer) {
       <DrawerOverlay />
       <DrawerContent>
         <DrawerCloseButton />
-        <DrawerHeader>Code details</DrawerHeader>
+        <DrawerHeader>{loc('drawer_details')}</DrawerHeader>
         <Divider />
         <DrawerCodeContent svgString={svgString} />
       </DrawerContent>
diff --git a/src/build/components/drawer/svgo/quick-configurations.tsx b/src/build/components/drawer/svgo/quick-configurations.tsx
index b7b2dc0f..fac6deec 100644
--- a/src/build/components/drawer/svgo/quick-configurations.tsx
+++ b/src/build/components/drawer/svgo/quick-configurations.tsx
@@ -1,7 +1,8 @@
 import React from 'react'
-import { RadioGroup, Radio, Stack, FormLabel } from '@chakra-ui/react'
+import { RadioGroup, Stack } from '@chakra-ui/react'
 
 import { SVGOConfig } from '../../../types'
+import loc from '../../utils/localization'
 
 import { defaultConfig, allFalseConfig } from './svgo-configs'
 import { RadioOption } from './radio-option'
@@ -43,9 +44,9 @@ export function QuickConfiguration({
       colorScheme="red"
     >
       <Stack direction="row" spacing={4}>
-        <RadioOption label="None" value="none" />
-        <RadioOption label="SVGO Default" value="default" />
-        <RadioOption label="Custom" value="custom" />
+        <RadioOption label={loc('drawer_labelNone')} value="none" />
+        <RadioOption label={loc('drawer_labelSvgo')} value="default" />
+        <RadioOption label={loc('drawer_labelCustom')} value="custom" />
       </Stack>
     </RadioGroup>
   )
diff --git a/src/build/components/drawer/svgo/svgo-plugins.ts b/src/build/components/drawer/svgo/svgo-plugins.ts
index a9ac0cbd..4f49e3ad 100644
--- a/src/build/components/drawer/svgo/svgo-plugins.ts
+++ b/src/build/components/drawer/svgo/svgo-plugins.ts
@@ -1,212 +1,205 @@
 import { Option } from '../../../types'
+import loc from '../../utils/localization'
 
 const optionsData: Option[] = [
   {
-    title: 'Beautify markup',
-    description: 'Format and indent markup',
+    title: loc('svgo_title_beaut'),
+    description: loc('svgo_desc_beaut'),
     pluginName: 'pretty',
   },
   {
-    title: 'Cleanup attributes',
-    description:
-      'Cleanup attributes from new lines, trailing, and repeating spaces',
+    title: loc('svgo_title_cleanAtt'),
+    description: loc('svgo_desc_cleanAtt'),
     pluginName: 'cleanupAttrs',
   },
   {
-    title: 'Cleanup enable-background',
-    description:
-      'Remove or cleanup enable-background attribute when it coincides with width and height',
+    title: loc('svgo_title_cleanBg'),
+    description: loc('svgo_desc_cleanBg'),
     pluginName: 'cleanupEnableBackground',
   },
   {
-    title: 'Cleanup id attributes',
-    description: 'Remove unused and minify used IDs',
+    title: loc('svgo_title_cleanId'),
+    description: loc('svgo_desc_cleanId'),
     pluginName: 'cleanupIDs',
   },
   {
-    title: 'Cleanup numeric values',
-    description:
-      'Round numeric values to the fixed precision and remove default px units',
+    title: loc('svgo_title_cleanNum'),
+    description: loc('svgo_desc_cleanNum'),
     pluginName: 'cleanupNumericValues',
   },
   {
-    title: 'Collapse groups',
-    description: 'Collapse redundant groups',
+    title: loc('svgo_title_coll'),
+    description: loc('svgo_desc_coll'),
     pluginName: 'collapseGroups',
   },
   {
-    title: 'Convert colors',
-    description: 'Convert colors from rgb() to #rrggbb and #rrggbb to #rgb)',
+    title: loc('svgo_title_convCol'),
+    description: loc('svgo_desc_convCol'),
     pluginName: 'convertColors',
   },
   {
-    title: 'Convert ellipsis to circle',
-    description: 'Convert non-eccentric <ellipse> to <circle>',
+    title: loc('svgo_title_convEllip'),
+    description: loc('svgo_desc_convEllip'),
     pluginName: 'convertEllipseToCircle',
   },
   {
-    title: 'Convert path data',
-    description:
-      'Convert and optimize path data to relative or absolute - whichever is shorter',
+    title: loc('svgo_title_convPath'),
+    description: loc('svgo_desc_convPath'),
     pluginName: 'convertPathData',
   },
   {
-    title: 'Convert shape to path',
-    description: 'Optimize and combine basic shapes to <path>',
+    title: loc('svgo_title_convShape'),
+    description: loc('svgo_desc_convShape'),
     pluginName: 'convertShapeToPath',
   },
   {
-    title: 'Convert transform',
-    description: 'Collapse multiple transforms into one',
+    title: loc('svgo_title_convTran'),
+    description: loc('svgo_desc_convTran'),
     pluginName: 'convertTransform',
   },
   {
-    title: 'Inline styles',
-    description:
-      'Move and merge styles from <style> elements to element style attributes',
+    title: loc('svgo_title_inl'),
+    description: loc('svgo_desc_inl'),
     pluginName: 'inlineStyles',
   },
   {
-    title: 'Merge paths',
-    description: 'Merge multiple paths into one',
+    title: loc('svgo_title_mergePath'),
+    description: loc('svgo_desc_mergePath'),
     pluginName: 'mergePaths',
   },
   {
-    title: 'Merge styles',
-    description: 'Merge multiple style elements into one',
+    title: loc('svgo_title_mergeStyle'),
+    description: loc('svgo_desc_mergeStyle'),
     pluginName: 'mergeStyles',
   },
   {
-    title: 'Minify styles',
-    description: 'Minify <style> elements with CSSO minifier',
+    title: loc('svgo_title_minStyles'),
+    description: loc('svgo_desc_minStyles'),
     pluginName: 'minifyStyles',
   },
   {
-    title: 'Move element attributes to group',
-    description: 'Move element attributes to their enclosing group',
+    title: loc('svgo_title_moveEl'),
+    description: loc('svgo_desc_moveEl'),
     pluginName: 'moveElemsAttrsToGroup',
   },
   {
-    title: 'Move group attributes to elements',
-    description: 'Move group attributes to the contained elements',
+    title: loc('svgo_title_moveGroup'),
+    description: loc('svgo_desc_moveGroup'),
     pluginName: 'moveGroupAttrsToElems',
   },
   {
-    title: 'Prefix id and class',
-    description:
-      'Prefix IDs and classes with the SVG filename or an arbitrary string',
+    title: loc('svgo_title_prefixId'),
+    description: loc('svgo_desc_prefixId'),
     pluginName: 'prefixIds',
   },
   {
-    title: 'Remove comments',
-    description: 'Remove comments inside the markup',
+    title: loc('svgo_title_removeComm'),
+    description: loc('svgo_desc_removeComm'),
     pluginName: 'removeComments',
   },
   {
-    title: 'Remove description',
-    description: 'Remove <desc> and content within',
+    title: loc('svgo_title_removeDesc'),
+    description: loc('svgo_desc_removeDesc'),
     pluginName: 'removeDesc',
   },
   {
-    title: 'Remove dimensions',
-    description: "Remove width/height and add viewBox if it's missing",
+    title: loc('svgo_title_removeDim'),
+    description: loc('svgo_desc_removeDim'),
     pluginName: 'removeDimensions',
   },
   {
-    title: 'Remove doctype',
-    description: 'Remove doctype declaration',
+    title: loc('svgo_title_removeDoc'),
+    description: loc('svgo_desc_removeDoc'),
     pluginName: 'removeDoctype',
   },
   {
-    title: 'Remove editor namespace data',
-    description: 'Remove editor namespaces, elements, and attributes',
+    title: loc('svgo_title_removeEdit'),
+    description: loc('svgo_desc_removeEdit'),
     pluginName: 'removeEditorsNSData',
   },
   {
-    title: 'Remove empty attributes',
-    description: 'Remove empty attributes',
+    title: loc('svgo_title_removeEmptyAtt'),
+    description: loc('svgo_desc_removeEmptyAtt'),
     pluginName: 'removeEmptyAttrs',
   },
   {
-    title: 'Remove empty containers',
-    description: 'Remove empty container elements',
+    title: loc('svgo_title_removeCont'),
+    description: loc('svgo_desc_removeCont'),
     pluginName: 'removeEmptyContainers',
   },
   {
-    title: 'Remove empty text',
-    description: 'Remove empty text elements',
+    title: loc('svgo_title_removeText'),
+    description: loc('svgo_desc_removeText'),
     pluginName: 'removeEmptyText',
   },
   {
-    title: 'Remove hidden elements',
-    description: 'Remove hiddent elements with disabled rendering',
+    title: loc('svgo_title_removeHidden'),
+    description: loc('svgo_desc_removeHidden'),
     pluginName: 'removeHiddenElems',
   },
   {
-    title: 'Remove metadata',
-    description: 'Remove <metadata> content within the markup',
+    title: loc('svgo_title_removeMeta'),
+    description: loc('svgo_desc_removeMeta'),
     pluginName: 'removeMetadata',
   },
   {
-    title: 'Remove non-inheritable attributes',
-    description: 'Remove non-inheritable group\'s "presentation" attributes',
+    title: loc('svgo_title_removeNon'),
+    description: loc('svgo_desc_removeNon'),
     pluginName: 'removeNonInheritableGroupAttrs',
   },
   {
-    title: 'Remove raster images',
-    description: 'Remove raster images from within the markup',
+    title: loc('svgo_title_removeRaster'),
+    description: loc('svgo_desc_removeRaster'),
     pluginName: 'removeRasterImages',
   },
   {
-    title: 'Remove title',
-    description: 'Remove <title> declaration',
+    title: loc('svgo_title_removeTitle'),
+    description: loc('svgo_desc_removeTitle'),
     pluginName: 'removeTitle',
   },
   {
-    title: 'Remove unknown elements and defaults',
-    description:
-      'Remove unknown elements and remove attributes with default values',
+    title: loc('svgo_title_removeUnk'),
+    description: loc('svgo_desc_removeUnk'),
     pluginName: 'removeUnknownsAndDefaults',
   },
   {
-    title: 'Remove unused namespace',
-    description: 'Remove unused namespaces declaration',
+    title: loc('svgo_title_removeUnuse'),
+    description: loc('svgo_desc_removeUnuse'),
     pluginName: 'removeUnusedNS',
   },
   {
-    title: 'Remove useless defs',
-    description: 'Remove elements inside <defs> without id',
+    title: loc('svgo_title_removeUselessDef'),
+    description: loc('svgo_desc_removeUselessDef'),
     pluginName: 'removeUselessDefs',
   },
   {
-    title: 'Remove useless stroke and fill',
-    description: 'Remove useless stroke and fill attributes',
+    title: loc('svgo_title_removeUselessStr'),
+    description: loc('svgo_desc_removeUselessStr'),
     pluginName: 'removeUselessStrokeAndFill',
   },
   {
-    title: 'Remove viewBox attribute',
-    description:
-      'Remove viewBox attribute when it coincides with width and height attributes',
+    title: loc('svgo_title_removeView'),
+    description: loc('svgo_desc_removeView'),
     pluginName: 'removeViewBox',
   },
   {
-    title: 'Remove XML instructions',
-    description: 'Remove XML processing instructions',
+    title: loc('svgo_title_removeXml'),
+    description: loc('svgo_desc_removeXml'),
     pluginName: 'removeXMLProcInst',
   },
   {
-    title: 'Remove XMLNS attribute',
-    description: 'Remove the xmlns attribute for inline SVG',
+    title: loc('svgo_title_removeXmlAtt'),
+    description: loc('svgo_desc_removeXmlAtt'),
     pluginName: 'removeXMLNS',
   },
   {
-    title: 'Sort attributes',
-    description: 'Sort element attributes alphabetically',
+    title: loc('svgo_title_sortAttr'),
+    description: loc('svgo_desc_sortAttr'),
     pluginName: 'sortAttrs',
   },
   {
-    title: 'Sort defs children',
-    description: 'Sort children of <defs> in order to improve compression',
+    title: loc('svgo_title_sortDefs'),
+    description: loc('svgo_desc_sortDefs'),
     pluginName: 'sortDefsChildren',
   },
 ]
diff --git a/src/build/components/footer/copyright.tsx b/src/build/components/footer/copyright.tsx
index a00aea0c..42ee908f 100644
--- a/src/build/components/footer/copyright.tsx
+++ b/src/build/components/footer/copyright.tsx
@@ -1,29 +1,25 @@
+import React from 'react'
 import { Text, TextProps, Link } from '@chakra-ui/react'
-import * as React from 'react'
+
+import loc from '../utils/localization'
 
 export const Copyright = (props: TextProps) => (
   <>
     <Text fontSize="sm" {...props}>
-      SVG Gobbler is an open source initiative by{' '}
-      <Link href="https://rossmoody.com/" color="red">
-        Ross Moody
+      {loc('footer_title')}
+      <Link href={loc('footer_portfolio')} color="red">
+        {loc('footer_titleName')}
       </Link>
       .
     </Text>
     <Text fontSize="sm" {...props}>
-      If you find it helpful, please leave a review on the{' '}
-      <Link
-        href="https://chrome.google.com/webstore/detail/svg-gobbler/mpbmflcodadhgafbbakjeahpandgcbch?hl=en"
-        color="red"
-      >
-        Chrome Web Store
-      </Link>{' '}
-      or{' '}
-      <Link
-        href="https://addons.mozilla.org/en-US/firefox/addon/svg-gobbler/"
-        color="red"
-      >
-        Firefox Addon Marketplace
+      {loc('footer_desc')}
+      <Link href={loc('footer_chromeLink')} color="red">
+        {loc('footer_chrome')}
+      </Link>
+      {loc('footer_or')}
+      <Link href={loc('footer_firefoxLink')} color="red">
+        {loc('footer_firefox')}
       </Link>
       .
     </Text>
diff --git a/src/build/components/footer/social-media-links.tsx b/src/build/components/footer/social-media-links.tsx
index 92784b44..22eda4bb 100644
--- a/src/build/components/footer/social-media-links.tsx
+++ b/src/build/components/footer/social-media-links.tsx
@@ -1,18 +1,20 @@
+import React from 'react'
 import { ButtonGroup, ButtonGroupProps, IconButton } from '@chakra-ui/react'
-import * as React from 'react'
 import { FaGithub, FaTwitter } from 'react-icons/fa'
 
+import loc from '../utils/localization'
+
 export const SocialMediaLinks = (props: ButtonGroupProps) => (
   <ButtonGroup variant="ghost" color="gray.600" {...props}>
     <IconButton
       as="a"
-      href="https://github.com/rossmoody/svg-gobbler"
+      href={loc('footer_github')}
       aria-label="GitHub"
       icon={<FaGithub fontSize="20px" />}
     />
     <IconButton
       as="a"
-      href="http://www.twitter.com/_rossmoody"
+      href={loc('footer_twitter')}
       aria-label="Twitter"
       icon={<FaTwitter fontSize="20px" />}
     />
diff --git a/src/build/components/gallery/data-gallery.tsx b/src/build/components/gallery/data-gallery.tsx
index b91f6773..0b14633d 100644
--- a/src/build/components/gallery/data-gallery.tsx
+++ b/src/build/components/gallery/data-gallery.tsx
@@ -9,6 +9,7 @@ import {
 
 import Card from '../card'
 import SVG from '../../../find/scripts/svg-class'
+import loc from '../utils/localization'
 
 interface GalleryData {
   data: SVG[][]
@@ -52,10 +53,10 @@ const DataGallery = ({ data }: GalleryData) => {
                 setTimeout(handleShowMore, 1)
                 setTimeout(setLoading, 5000, false)
               }}
-              loadingText="Loading SVGs"
+              loadingText={loc('gallery_load')}
               isLoading={loading}
             >
-              Show more
+              {loc('gallery_show')}
             </Button>
           </Center>
         )}
diff --git a/src/build/components/gallery/empty-gallery.tsx b/src/build/components/gallery/empty-gallery.tsx
index 1cf31d6b..b9912cf1 100644
--- a/src/build/components/gallery/empty-gallery.tsx
+++ b/src/build/components/gallery/empty-gallery.tsx
@@ -10,8 +10,8 @@ import {
 } from '@chakra-ui/react'
 import { FaPlus } from 'react-icons/fa'
 
-import { AppData } from '../../types'
 import { util } from '../utils/upload'
+import loc from '../utils/localization'
 
 interface EmptyGallery {
   headline: string
@@ -63,7 +63,7 @@ const EmptyGallery = ({ headline, description }: EmptyGallery) => {
                 leftIcon={<FaPlus />}
                 onClick={util.handleUploadClick}
               >
-                Upload SVG
+                {loc('gallery_upload')}
               </Button>
             </Box>
           </Flex>
diff --git a/src/build/components/gallery/index.tsx b/src/build/components/gallery/index.tsx
index 0f1339c9..1b8eda91 100644
--- a/src/build/components/gallery/index.tsx
+++ b/src/build/components/gallery/index.tsx
@@ -1,10 +1,11 @@
 import React from 'react'
 
 import { AppData } from '../../types'
+import loc from '../utils/localization'
 
 import LoadingGallery from './loading-gallery'
-import EmptyGallery from './empty-gallery'
 import DataGallery from './data-gallery'
+import EmptyGallery from './empty-gallery'
 
 interface GalleryData {
   data: AppData
@@ -19,8 +20,8 @@ const Gallery = ({ data }: GalleryData) => {
     case 'empty': {
       return (
         <EmptyGallery
-          headline="No available SVGs to gobble"
-          description="Upload your own SVGs to this page to optimize them using SVGO"
+          headline={loc('gallery_noAvailTitle')}
+          description={loc('gallery_noAvailDesc')}
         />
       )
     }
@@ -28,8 +29,8 @@ const Gallery = ({ data }: GalleryData) => {
     case 'system': {
       return (
         <EmptyGallery
-          headline="Upload an SVG"
-          description="Upload SVGs onto this page to optimize"
+          headline={loc('gallery_uploadTitle')}
+          description={loc('gallery_uploadDesc')}
         />
       )
     }
@@ -37,8 +38,8 @@ const Gallery = ({ data }: GalleryData) => {
     case 'error': {
       return (
         <EmptyGallery
-          headline="Shucks, something went wrong"
-          description="Close this page and give it another try or upload your own SVGs"
+          headline={loc('gallery_errorTitle')}
+          description={loc('gallery_errorDesc')}
         />
       )
     }
diff --git a/src/build/components/index.ts b/src/build/components/index.ts
index adcf0b09..cbfa3606 100644
--- a/src/build/components/index.ts
+++ b/src/build/components/index.ts
@@ -4,3 +4,5 @@ export { default as Footer } from './footer'
 export { default as Navbar } from './navbar'
 export { default as Toolbar } from './toolbar'
 export { default as Gallery } from './gallery'
+
+export { default as loc } from './utils/localization'
diff --git a/src/build/components/modals/filename-modal.tsx b/src/build/components/modals/filename-modal.tsx
index 87645817..1cd22542 100644
--- a/src/build/components/modals/filename-modal.tsx
+++ b/src/build/components/modals/filename-modal.tsx
@@ -15,6 +15,8 @@ import {
   ModalFooter,
 } from '@chakra-ui/react'
 
+import loc from '../utils/localization'
+
 interface PopoverFormTypes {
   title: string
   svgString: string
@@ -55,7 +57,7 @@ const FilenameModal = ({
           <ModalCloseButton />
           <ModalBody>
             <FormControl>
-              <FormLabel htmlFor="filename">Filename</FormLabel>
+              <FormLabel htmlFor="filename">{loc('modals_filename')}</FormLabel>
               <InputGroup>
                 <Input
                   id="filename"
@@ -63,14 +65,14 @@ const FilenameModal = ({
                   defaultValue={filename}
                   onChange={(event) => setFilename(event.target.value)}
                 />
-                <InputRightAddon>.svg</InputRightAddon>
+                <InputRightAddon>{loc('modals_fileType')}</InputRightAddon>
               </InputGroup>
             </FormControl>
           </ModalBody>
 
           <ModalFooter>
             <Button colorScheme="red" isFullWidth type="submit">
-              Save
+              {loc('modals_save')}
             </Button>
           </ModalFooter>
         </ModalContent>
diff --git a/src/build/components/modals/image-modal.tsx b/src/build/components/modals/image-modal.tsx
index be8ea367..6e0d9bce 100644
--- a/src/build/components/modals/image-modal.tsx
+++ b/src/build/components/modals/image-modal.tsx
@@ -16,13 +16,13 @@ import {
   Input,
   HStack,
   InputGroup,
-  Text,
   useColorModeValue,
   FormControl,
 } from '@chakra-ui/react'
 
 import handle from '../utils/actions'
 import { SVGImage } from '../utils/image-class'
+import loc from '../utils/localization'
 
 interface ImageModalProps {
   callback: React.Dispatch<React.SetStateAction<boolean>>
@@ -57,7 +57,7 @@ const ImageModal = ({
     >
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Export image</ModalHeader>
+        <ModalHeader>{loc('modals_exportImage')}</ModalHeader>
         <ModalCloseButton />
         <ModalBody marginBottom={4}>
           <Center width="100%" height="100%" position="relative">
@@ -91,10 +91,6 @@ const ImageModal = ({
         </ModalBody>
 
         <ModalFooter flexDir="column" alignItems="flex-start">
-          <Box marginBottom={5}>
-            <Text fontWeight="semibold">Settings</Text>
-          </Box>
-
           <form
             onSubmit={(event) => {
               event.preventDefault()
@@ -107,7 +103,7 @@ const ImageModal = ({
             <FormControl>
               <HStack>
                 <FormLabel margin={0} fontSize="sm" htmlFor="height">
-                  Height
+                  {loc('modals_height')}
                   <InputGroup>
                     <Input
                       ref={firstFieldRef}
@@ -127,11 +123,11 @@ const ImageModal = ({
                         setSize({ height: newHeight, width: newWidth })
                       }}
                     />
-                    <InputRightAddon children="px" />
+                    <InputRightAddon children={loc('modals_px')} />
                   </InputGroup>
                 </FormLabel>
                 <FormLabel fontSize="sm" htmlFor="width">
-                  Width
+                  {loc('modals_width')}
                   <InputGroup>
                     <Input
                       id="width"
@@ -150,14 +146,14 @@ const ImageModal = ({
                         setSize({ height: newHeight, width: newWidth })
                       }}
                     />
-                    <InputRightAddon children="px" />
+                    <InputRightAddon children={loc('modals_px')} />
                   </InputGroup>
                 </FormLabel>
               </HStack>
             </FormControl>
             <FormControl marginTop={4}>
               <FormLabel htmlFor="image-filename" fontSize="sm">
-                Filename
+                {loc('modals_filename')}
               </FormLabel>
               <InputGroup>
                 <Input
@@ -165,7 +161,7 @@ const ImageModal = ({
                   defaultValue={filename}
                   onChange={(event) => setFilename(event.target.value)}
                 />
-                <InputRightAddon>.png</InputRightAddon>
+                <InputRightAddon>{loc('modals_fileType_png')}</InputRightAddon>
               </InputGroup>
             </FormControl>
 
@@ -176,7 +172,7 @@ const ImageModal = ({
               isFullWidth
               type="submit"
             >
-              Export PNG
+              {loc('modals_exportImage')}
             </Button>
           </form>
         </ModalFooter>
diff --git a/src/build/components/navbar/index.tsx b/src/build/components/navbar/index.tsx
index b6875212..ac62170b 100644
--- a/src/build/components/navbar/index.tsx
+++ b/src/build/components/navbar/index.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import { Box, Flex, useColorModeValue, Button } from '@chakra-ui/react'
 import { FeedbackFish } from '@feedback-fish/react'
 
+import loc from '../utils/localization'
+
 import Logo from './logo'
 import ThemeToggle from './theme-toggle'
 
@@ -22,7 +24,7 @@ const Navbar = ({ data, location }: NavbarData) => {
             projectId="cc5d44e3563b88"
             metadata={{ data: stringData, location }}
           >
-            <Button marginRight={4}>Send feedback</Button>
+            <Button marginRight={4}>{loc('nav_fb')}</Button>
           </FeedbackFish>
           <ThemeToggle />
         </Flex>
diff --git a/src/build/components/navbar/theme-toggle.tsx b/src/build/components/navbar/theme-toggle.tsx
index a132dbd4..54e82626 100644
--- a/src/build/components/navbar/theme-toggle.tsx
+++ b/src/build/components/navbar/theme-toggle.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import { IconButton, useColorMode } from '@chakra-ui/react'
 import { FaMoon, FaSun } from 'react-icons/fa'
 
+import loc from '../utils/localization'
+
 function ThemeToggle() {
   const { colorMode, toggleColorMode } = useColorMode()
 
@@ -10,7 +12,7 @@ function ThemeToggle() {
   return (
     <IconButton
       onClick={toggleColorMode}
-      aria-label="Theme toggle"
+      aria-label={loc('nav_theme')}
       borderRadius="md"
       icon={<Icon />}
     />
diff --git a/src/build/components/toolbar/data-toolbar.tsx b/src/build/components/toolbar/data-toolbar.tsx
index 207eec86..f6116fe2 100644
--- a/src/build/components/toolbar/data-toolbar.tsx
+++ b/src/build/components/toolbar/data-toolbar.tsx
@@ -16,6 +16,7 @@ import handle from '../utils/actions'
 import Tooltip from '../generic/tooltip'
 import { AppData } from '../../types'
 import { util } from '../utils/upload'
+import loc from '../utils/localization'
 
 interface ToolbarData {
   data: AppData
@@ -42,7 +43,7 @@ const DataToolbar = ({ data, setData, location }: ToolbarData) => {
               color={useColorModeValue('gray.600', 'gray.400')}
               fontSize="sm"
             >
-              Showing {util.getSvgQuantity(data)} available SVG
+              {util.getSvgQuantity(data)} {loc('toolbar_qty')}
               {util.isPlural(util.getSvgQuantity(data))}
             </Text>
           </Stack>
@@ -60,7 +61,7 @@ const DataToolbar = ({ data, setData, location }: ToolbarData) => {
                 colorScheme="red"
                 onClick={() => handle.downloadAllSVGs(util.getSvgStrings(data))}
               >
-                Download all
+                {loc('toolbar_download')}
               </Button>
             )}
             <Input
@@ -86,13 +87,13 @@ const DataToolbar = ({ data, setData, location }: ToolbarData) => {
                   .catch(() => {})
               }}
             />
-            <Tooltip label="Drop SVGs anywhere on this page to upload">
+            <Tooltip label={loc('toolbar_tooltip')}>
               <Button
                 leftIcon={<FaPlus />}
                 size="lg"
                 onClick={util.handleUploadClick}
               >
-                Upload
+                {loc('toolbar_upload')}
               </Button>
             </Tooltip>
           </HStack>
diff --git a/src/build/components/utils/localization.ts b/src/build/components/utils/localization.ts
new file mode 100644
index 00000000..bf7044f5
--- /dev/null
+++ b/src/build/components/utils/localization.ts
@@ -0,0 +1,7 @@
+import strings from '../../../../extension/_locales/en/messages.json'
+
+type StringKeys = keyof typeof strings
+
+const loc = (string: StringKeys) => chrome.i18n.getMessage(string)
+
+export default loc