https://github.com/rossmoody/svg-gobbler Skip to content Navigation Menu Toggle navigation Sign in * Product + Actions Automate any workflow + Packages Host and manage packages + Security Find and fix vulnerabilities + Codespaces Instant dev environments + Copilot Write better code with AI + Code review Manage code changes + Issues Plan and track work + Discussions Collaborate outside of code Explore + All features + Documentation + GitHub Skills + Blog * Solutions For + Enterprise + Teams + Startups + Education By Solution + CI/CD & Automation + DevOps + DevSecOps Resources + Learning Pathways + White papers, Ebooks, Webinars + Customer Stories + Partners * Open Source + GitHub Sponsors Fund open source developers + The ReadME Project GitHub community articles Repositories + Topics + Trending + Collections * Pricing Search or jump to... Search code, repositories, users, issues, pull requests... Search [ ] Clear Search syntax tips Provide feedback We read every piece of feedback, and take your input very seriously. [ ] [ ] Include my email address so I can be contacted Cancel Submit feedback Saved searches Use saved searches to filter your results more quickly Name [ ] Query [ ] To see all available qualifiers, see our documentation. Cancel Create saved search Sign in Sign up You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert {{ message }} rossmoody / svg-gobbler Public * Notifications You must be signed in to change notification settings * Fork 24 * Star 629 * Open source browser extension for finding, processing, exporting, optimizing, and managing SVG content. www.svggobbler.com License Apache-2.0 license 629 stars 24 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings * Code * Issues 3 * Pull requests 1 * Actions * Security * Insights Additional navigation options * Code * Issues * Pull requests * Actions * Security * Insights rossmoody/svg-gobbler This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository. main BranchesTags Go to file Code Folders and files Name Name Last commit Last commit message date Latest commit History 459 Commits .vscode .vscode _locales _locales assets assets public public server server src src .eslintrc.cjs .eslintrc.cjs .gitignore .gitignore .prettierrc .prettierrc LICENSE LICENSE README.md README.md background.ts background.ts index.html index.html manifest.config.ts manifest.config.ts onboarding.html onboarding.html package.json package.json postcss.config.js postcss.config.js tailwind.config.js tailwind.config.js tsconfig.json tsconfig.json tsconfig.node.json tsconfig.node.json vite.config.ts vite.config.ts yarn.lock yarn.lock View all files Repository files navigation * README * Apache-2.0 license [read-me] Where to install This extension is available on: * Chrome Web store * Firefox Addon Marketplace (locked to v3) --------------------------------------------------------------------- Features SVG Gobbler is a browser extension that finds the SVG content in your current tab and lets you optimize, download, copy, edit, or export. Find SVGs * Quickly find SVGs from a site by various placement methods like base64 or background src * Handle CORs restricted SVGs from a page * Find individual sprite SVG instances Export SVGs * Export as SVG, PNG, WEBP, JPEG and various other formats * Transform SVGs into minified Data URIs * Transform SVGs into React components with SVGR * Optimize and minify SVGs with SVGO Organize SVGs * Group and categorize SVGs by their primary domain or custom collection name * Move, copy, duplicate, and optimize icons before sharing * Save and store a set of uploaded SVGs for optimization --------------------------------------------------------------------- Local development Before making edits you will need to build the extension locally and side load it as a developer extension to test any changes. The sourcing and processing logic is abstracted into a separate package called svg-gobbler-scripts here. 1. Clone the repo Clone the repo to your local machine and navigate into the root directory. cd svg-gobbler 2. Install dependencies SVG Gobbler uses yarn to build the necessary dependencies. yarn 3. Start and watch a build For development with hot reloading use Vite: yarn dev This will build to the dist folder. To load the extension, open the Extensions Dashboard, enable "Developer mode", click "Load unpacked", and choose the dist folder. When you make changes in src the background script and any content script will reload automatically. 4. Start the server For a majority of the functionality you won't need a server. If you want to make some local fetch calls related to Node processes in a separate terminal session cd into the server directory. cd server Install the necessary dependencies yarn From this directory, compile the server function to the dist folder. yarn build In a separate terminal session serve the function on a local server. yarn serve This will startup the server and restart it any time a change is recompiled. --------------------------------------------------------------------- About 5 versions and 5+ years ago, this started as a pet project to improve the SVG Crowbar tool that is no longer being maintained by NY Times. Powered by This project benefits from some incredibly talented folks. * Vite: Frontend tooling and build processes * CRXJS: Chrome extension build automation * Tailwind CSS: CSS styling around the app * SVGR: SVG to React component transformation * SVGO: SVG optimization scripts * Codemirror: Extensible code editor * Radix UI: Accessible component library primitives * JSZip: Zipping files for download * Mini SVG Data URI: Minify SVG data URIs * React Router: App routing Open source This extension is open source and doesn't collect any information from users. It's free, and made available because I enjoy making useful things for the web. Please consider contributing with an idea, bug fix, or feature request. --------------------------------------------------------------------- More apps by me I like making things. Check out what I'm up to lately. About Open source browser extension for finding, processing, exporting, optimizing, and managing SVG content. www.svggobbler.com Topics javascript chrome-extension svg typescript extension firefox-addon icons svg-icons icon svgo inline-svg svgr svg-export Resources Readme License Apache-2.0 license Activity Stars 629 stars Watchers 12 watching Forks 24 forks Report repository Releases 23 v5.7 Latest May 8, 2024 + 22 releases Contributors 10 * @rossmoody * @dependabot[bot] * @NAjustin * @petemill * @fileformat * @xu-hong * @Tressley * @Gitoffthelawn * @umar-ahmed * @d3ward Languages * TypeScript 96.6% * CSS 1.7% * JavaScript 1.4% * HTML 0.3% Footer (c) 2024 GitHub, Inc. Footer navigation * Terms * Privacy * Security * Status * Docs * Contact * Manage cookies * Do not share my personal information You can't perform that action at this time.