Переходьте в офлайн за допомогою програми Player FM !
How to Create SVG Sprite With Icons
Manage episode 391415367 series 3474159
This story was originally published on HackerNoon at: https://hackernoon.com/how-to-create-svg-sprite-with-icons.
The best way to use SVG icons is to create an SVG sprite. Here's an easy tutorial for beginners and pros alike.
Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #frontend, #svg, #webpack, #vite, #how-to-create-svg-sprite, #what-is-svg-sprite, #how-to-create-icons, #hackernoon-top-story, #hackernoon-es, #hackernoon-hi, #hackernoon-zh, #hackernoon-fr, #hackernoon-bn, #hackernoon-ru, #hackernoon-vi, #hackernoon-pt, #hackernoon-ja, #hackernoon-de, #hackernoon-ko, #hackernoon-tr, and more.
This story was written by: @gmakarov. Learn more about this writer by checking @gmakarov's about page, and for more stories, please visit hackernoon.com.
Developers often insert SVG directly into JSX. This is convenient to use, but it increases the JS bundle size. In the pursuit of optimization, I decided to find another way of using SVG icons without cluttering the bundle. We will talk about SVG sprites, what they are, how to use them, and what tools are available for working with them. Starting with theory, we will write a script that generates an SVG sprite step by step and conclude by discussing plugins for vite and webpack.
346 епізодів
Manage episode 391415367 series 3474159
This story was originally published on HackerNoon at: https://hackernoon.com/how-to-create-svg-sprite-with-icons.
The best way to use SVG icons is to create an SVG sprite. Here's an easy tutorial for beginners and pros alike.
Check more stories related to programming at: https://hackernoon.com/c/programming. You can also check exclusive content about #frontend, #svg, #webpack, #vite, #how-to-create-svg-sprite, #what-is-svg-sprite, #how-to-create-icons, #hackernoon-top-story, #hackernoon-es, #hackernoon-hi, #hackernoon-zh, #hackernoon-fr, #hackernoon-bn, #hackernoon-ru, #hackernoon-vi, #hackernoon-pt, #hackernoon-ja, #hackernoon-de, #hackernoon-ko, #hackernoon-tr, and more.
This story was written by: @gmakarov. Learn more about this writer by checking @gmakarov's about page, and for more stories, please visit hackernoon.com.
Developers often insert SVG directly into JSX. This is convenient to use, but it increases the JS bundle size. In the pursuit of optimization, I decided to find another way of using SVG icons without cluttering the bundle. We will talk about SVG sprites, what they are, how to use them, and what tools are available for working with them. Starting with theory, we will write a script that generates an SVG sprite step by step and conclude by discussing plugins for vite and webpack.
346 епізодів
Усі епізоди
×
1 Step-by-Step Guide to Publishing Your First Python Package on PyPI Using Poetry: Lessons Learned 4:05

1 AOSP and Linux Cross Border Convergence! Look at OpenFDE, New Open Source Linux Desktop Environment 3:16

1 Is Your Reporting Software WCAG Compliant? Make Data Accessible to Everyone with Practical Steps 14:36

1 TypeScript SDK Development: A 5-Year-Old Could Follow This Step-By-Step ~ Part 1: Our First MVP 4:15

1 Load Balancing For High Performance Computing
Using Quantum Annealing: Grid Based Application 12:00

1 Load Balancing For High Performance Computing
Using Quantum Annealing: Adaptive Mesh Refinement 4:57

1 How to Create Scrollable Lists with Protocol-Oriented Design & UICollectionViewCompositionalLayout 4:03
Ласкаво просимо до Player FM!
Player FM сканує Інтернет для отримання високоякісних подкастів, щоб ви могли насолоджуватися ними зараз. Це найкращий додаток для подкастів, який працює на Android, iPhone і веб-сторінці. Реєстрація для синхронізації підписок між пристроями.