标签：#svg

TL;DR SVG attributes like stroke-width become strokeWidth in JSX. class → className . Numeric values become {expressions} . Inline styles become objects. xmlns and XML comments are removed. The converter outputs either JSX or TSX with SVGProps . Use automation (SVGR or SVGCode) for large icon sets. Import only what you need to keep bundle sizes small. Converting an SVG file into a React component is more than just pasting markup into a .jsx or .tsx file. React uses JSX, which is stricter than HTML/XML and requires specific changes to ensure your SVG renders correctly and remains maintainable. In this post, we’ll explore every transformation that takes place—from attribute casing to TypeScript typing—so you understand exactly what our free SVG to React converter does under the hood. What Actually Changes? Kebab‑case Attributes Become camelCase SVG uses attributes like stroke-width , fill-rule , and clip-path . JSX requires property names that are valid JavaScript identifiers, so these become: SVG Attribute React JSX stroke-width strokeWidth stroke-linecap strokeLinecap stroke-linejoin strokeLinejoin fill-rule fillRule clip-path clipPath font-size fontSize stroke-dasharray strokeDasharray class Becomes className In SVG you write class="icon" , but in JSX you must use className="icon" because class is a reserved word in JavaScript. Numeric Attributes Are Converted to Expressions React treats string values differently from numbers. For numeric SVG attributes like width , height , x , y , cx , r , etc., the converter outputs {value} instead of "value" . <circle cx="12" cy="12" r="10" /> becomes: < circle cx = { 12 } cy = { 12 } r = { 10 } /> Inline Styles Become Objects If your SVG uses style="fill: red; stroke: blue;" , it must be converted to a JavaScript object: style = {{ fill : ' red ' , stroke : ' blue ' }} xmlns and Namespace Declarations Are Removed React automatically uses the correct SVG namespace, so xmlns and other XML namespace declarations are unnecessary a

I spent a while building an icon editor that runs entirely in the browser (icons.jamuny.com, free, no account). Here is what cost me the most time. A presentation attribute loses to any author CSS rule I was scaling handle stroke widths by 1 / zoom and writing the result as an attribute. The value was never used. handle . setAttribute ( ' stroke-width ' , String ( 0.35 / zoom )); .handle { stroke-width: 0.35 } in the stylesheet outranks it, because a presentation attribute sits at the very bottom of the cascade. Measured in Chromium: an attribute of 0.05 computed as 0.35px . Every handle thickened on screen as you zoomed in, for months, with no error anywhere. The fix is a custom property, which is an ordinary declaration and wins where an attribute cannot: layer . style . setProperty ( ' --px ' , String ( 1 / zoom )); /* .handle { stroke-width: calc(0.35 * var(--px)) } */ Geometry attributes like r and width are unaffected. They have no CSS counterpart here, so nothing was ever overriding them. A focused SVG element gets a focus ring measured in user units My canvas is 24 units wide and about 620 pixels. Chrome drew its default focus ring at outline-width: 2.72727px in user units, which is about 24 screen pixels. A fat blue disc appeared around every point you clicked. It was reported to me four times, and four times I thinned something of my own that was not the cause. getComputedStyle ( document . activeElement ). outline That one line found it. My rule only covered :focus-visible , which is the keyboard case, and the keyboard case is the one where I draw a ring of my own. var() does work in a presentation attribute, and I wrote down that it doesn't I needed a segment colour that changes with the theme, so the value is oklch(var(--band-l) var(--band-c) 47) . I applied it through a style and put a comment beside it saying var() is not substituted in presentation attributes. It is. Both forms compute to the same colour, including on an element built detached and ap

Change an SVG's color by editing fill and stroke , either as attributes or through CSS. Simple in theory. In practice there are three places a color can be declared in the same file, they follow the normal CSS cascade, and if you don't know that, "I changed the fill and nothing happened" turns into a twenty-minute debugging session. Here's the part of SVG color handling that usually doesn't get spelled out. fill and stroke are separate properties Every shape has an inside ( fill ) and an outline ( stroke ), set independently: <circle cx= "50" cy= "50" r= "40" fill= "#3366ff" stroke= "#000" stroke-width= "2" /> Unset fill defaults to black. Unset stroke defaults to none. If an icon is pure fill with no stroke at all (most converted icon-font SVGs are), editing stroke-width is never going to do anything visible, and that's usually the first dead end people hit. The cascade is the actual bug source A color can come from three places, and they don't have equal priority: A presentation attribute: <path fill="red" /> An inline style attribute: <path style="fill: red;" /> A <style> block or external stylesheet: path { fill: red; } Normal CSS specificity applies: style attribute beats stylesheet, stylesheet beats presentation attribute. Edit the fill="red" attribute directly, and if a <style> block elsewhere in the same file also targets that path, your edit is overridden and nothing changes on screen. No error, no warning, it just loses. If a color edit isn't sticking, grep the file for <style before assuming your tool, or your edit, is broken. This one thing accounts for most "the SVG editor is buggy" reports that are actually the cascade working exactly as designed. currentColor: SVG's inheritance trick Set fill="currentColor" and the shape stops carrying its own color and instead inherits whatever color is set to on an ancestor element, the same mechanism that makes text inherit color: <path fill= "currentColor" d= "..." /> .icon { color : #ff0000 ; } <span class= "icon

If you've opened a <path d="..."> string and had no idea what you were looking at, here's the short version: it's a tiny drawing language. A pen moves around a coordinate space, and each letter in the string is an instruction telling it what to do next. TL;DR M / m moves the pen, L / l draws a straight line, C / c and Q / q draw bezier curves, A / a draws an arc, Z / z closes the shape. Uppercase is absolute coordinates, lowercase is relative to the pen's current position. A visual path editor drags the exact same numbers you'd type by hand, it just shows you the curve instead of making you compute it. Reading a path string <path d="M10 10 L90 10 L90 90 Z" /> Broken down: move to (10, 10), draw a line to (90, 10), draw a line to (90, 90), close the path back to the start. That's a right triangle. Every path, no matter how complex, is this same pattern: a command letter followed by however many numbers that command needs, repeated. The command set Command Name What it takes M / m Move to x, y L / l Line to x, y C / c Cubic bezier control1 x/y, control2 x/y, end x/y Q / q Quadratic bezier control x/y, end x/y A / a Arc rx, ry, rotation, large-arc-flag, sweep-flag, end x/y Z / z Close path none C and Q are both bezier curves, the difference is one control point ( Q ) vs two ( C ). Two control points give you more independent influence over each end of the curve; one control point gives you a simpler, more symmetric curve. There are also shorthand continuations ( S / s , T / t ) for chaining smooth curves without repeating a control point, but the six above are what you'll hit constantly. A is the one people avoid writing by hand. Six parameters, two of which are flags (0 or 1) that determine which of four possible arcs you get for the same radii and endpoints. Flip one and you're not slightly off, you're on the opposite side of the ellipse. Absolute vs relative is the part that bites Every command above has an uppercase and lowercase form, and it's not cosmetic: <!-- a

Lucide, Tabler Icons, and Phosphor are three of the most recommended open-source icon libraries, and they come up together in almost every "which icon set should I use" thread. All three are permissively licensed, actively maintained upstream, and fully browsable on svgicons.com, so you can compare the actual vectors side by side before committing your project to one visual language. The numbers and license details below are read from the catalog database that powers this site, not copied from marketing pages. Where the sets differ upstream, the comparison sticks to what ships in the indexed releases. Quick comparison Set Icons here License Grid Drawing model Variants Lucide 1,778 ISC 24x24 2px stroke, currentColor One style; experimental icons live in Lucide Lab (373) Tabler Icons 6,143 MIT 24x24 2px stroke, currentColor Outline plus 1,087 -filled icons in the same set Phosphor 9,161 MIT 256x256 Filled paths, currentColor Six weights: Regular, Thin, Light, Bold, Fill, Duotone Three drawing philosophies Lucide and Tabler share a philosophy: a 24x24 grid, geometry drawn as strokes rather than filled shapes, and a default stroke width of 2. Lucide grew out of the Feather community and keeps that restrained, minimal feel. Tabler follows the same conventions but covers far more ground. Because both are stroke-based, an icon is literally a set of lines that inherit your text color: <!-- Lucide arrow-right, exactly as stored in the catalog --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"> <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"/> </svg> Phosphor takes the opposite road. Its icons are filled paths on a 256x256 grid, so the shapes are solid geometry instead of outlined line work. The weight system replaces stroke-width tweaking: instead of making lines thicker, you switch to the Bold cut of the same icon. <!-- Phosphor arrow-right (Regular weight)

There are exactly three sensible ways to get an SVG icon into a React codebase: paste it inline as a component, import the file through a build transform like SVGR, or reference it from a sprite. Most projects need only the first. This guide walks through the inline approach with Next.js and Tailwind specifics, and points to the deeper guides where a topic deserves its own article. Option 1: an inline JSX component Take a real icon from the catalog, convert the SVG attributes to JSX casing, and you have a dependency-free component. This is Lucide's search icon, exactly as it ships in the Lucide set , wrapped for React: export function SearchIcon ( props ) { return ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" fill = "none" stroke = "currentColor" strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = { 2 } aria-hidden = "true" { ... props } > < path d = "m21 21l-4.34-4.34" /> < circle cx = "11" cy = "11" r = "8" /> </ svg > ); } The JSX gotchas are all attribute casing: stroke-width becomes strokeWidth , stroke-linecap becomes strokeLinecap , and class becomes className . Icon pages on this site do the conversion for you: every icon offers React, Vue, Svelte, and Solid snippets next to the raw SVG, so you can copy the JSX form directly. If you have a folder of SVG files instead, the free SVG to component converter batch-converts them in the browser. Prefer importing .svg files over pasting? That is the SVGR route, covered step by step in our React with Vite and SVGR guide . Next.js: server components by default An icon component like the one above has no state, no effects, and no event handlers, which makes it a perfect React Server Component. In the Next.js App Router it renders to static markup on the server and adds nothing to the client bundle: import { SearchIcon } from " @/components/icons " ; export default function DocsHeader () { return ( < label className = "flex items-center gap-2" > < SearchIcon className = "h-5 w-5 text-zinc

Angular is well served for icons. Material Symbols alone runs to thousands of glyphs, and the community wrappers pull in dozens of other sets on top. Geography is where the shelf runs out. You get globes and map pins, sometimes a set of flags, rarely the outline of Japan and almost never the six states of the GCC. GeoIcons ships country and area icons as Angular standalone components, 422 of them at the time of writing. Adding one takes three steps: install the package, import the component by its ISO code, and render its selector. npm i @geoicons/angular import { Component } from ' @angular/core ' ; import { Us } from ' @geoicons/angular/countries ' ; @ Component ({ selector : ' app-root ' , imports : [ Us ], template : `<geoicon-us aria-label="United States" />` , }) export class App {} See it live on geoicons.io → That is the whole path. Below: inputs, styling, accessibility, and picking an icon when you only know the country at runtime. Key takeaways Install @geoicons/angular , import each country by its ISO 3166 alpha-2 code in PascalCase, and add it to the component's imports array. The class is Us ; the selector you write in the template is <geoicon-us /> . Styling props are explicit inputs, because Angular has no rest spread. Everything else goes on the host element. Icons render as decorative unless you name them, so reach for aria-label only where no adjacent text says the country. Step 1: Install the Angular package Add the package to your project: npm i @geoicons/angular It needs @angular/core and @angular/common 15.1 or newer, plus rxjs 7 or newer. That 15.1 floor comes from hostDirectives , which the icons use to share their styling inputs and which landed in that release alongside standalone components . The package sets "sideEffects": false , so the CLI can drop what you never import. List three icons in a component and you ship three. Why that matters for icon libraries . Step 2: Import by ISO code Every country ships as a named export under its ISO

Hey everyone! 👋 As a designer, I constantly needed high-quality vector topographic contour lines and generative patterns for branding, UI hero backgrounds, and print projects. Most existing tools were either heavy GIS software (like QGIS) or required static file purchases. So I built Topolines —a fast, web-based vector topographic generator. 🎛️ Key Features: Parametric Control: Fine-tune elevation density, noise scale, detail, and line weights in real-time. Custom Styling: Full visual control over color palettes, gradients, contrast, and backgrounds. Clean Vector Export: Instant SVG exports (perfect for Figma, Illustrator, or web code) and HD PNGs. Frictionless Free Tier: Direct PNG exports without even needing an account. I'd love for you to try it out at topolines.app and let me know your feedback or feature requests!

Most dashboard icon problems do not come from bad icons. They come from good icons used with the wrong meaning. You search for users , pick a clean SVG icon, place it in the sidebar, and move on. Then later you need another icon for: Customers Team members Account owners Permissions Audiences Invited users Admins Suddenly, the same “user” metaphor has to carry too many meanings. That is where SaaS dashboards often start to feel noisy. Not because the icons are ugly. Not because the SVGs are technically wrong. Not because the design system is broken. Because the icon choices were made by keyword instead of meaning. Keyword search is only the first step Most developers choose icons like this: Need an icon for billing? Search billing . Need an icon for users? Search users . Need an icon for analytics? Search chart . Need an icon for settings? Search settings . That works for finding candidates. But it does not solve the real UI problem. A keyword tells you what the icon is related to. It does not tell you what the icon means in your product. For example, search for settings . You might find: A gear Sliders A wrench Control knobs A preferences panel A tune icon They all match the keyword. But they do not say the same thing. A gear usually means global settings. Sliders suggest adjustable preferences or filters. A wrench feels technical or maintenance-oriented. Control knobs suggest fine tuning. A panel icon may suggest a configuration screen. The same keyword can point to different mental models. And in a dashboard, mental models matter more than decorative accuracy. SaaS dashboards are meaning-dense interfaces A marketing website can sometimes get away with decorative icons. A SaaS dashboard cannot. Dashboards are dense. They contain navigation, actions, status indicators, tables, filters, empty states, permissions, billing screens, integrations, reports, and settings. Users do not look at each icon in isolation. They scan. They compare. They move quickly. They expect

There are many ways to create memorable experiences. Sometimes it's as simple as a form that completes smoothly. But here I'm interested in sharing techniques I reach for when I want a site to feel alive and be remembered. Creating Memorable Web Experiences: A Modern CSS Toolkit originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

Every web app needs icons. How you manage them at scale — that's where most teams make mistakes. This is the complete guide to building an SVG icon system that doesn't fall apart as your app grows. Why SVG (Not Icon Fonts or PNG) Icon fonts (FontAwesome, etc.) are the legacy approach. The problems: One broken font file breaks all icons Accessibility is terrible (screen readers read the unicode character) Crispy rendering requires specific font-smoothing hacks No multi-color support PNG icons are dead for UI work. Blurry on Retina, can't be styled with CSS, fixed file per size. SVG wins: Infinitely scalable, pixel-perfect on any screen Styleable with CSS ( currentColor , fill, stroke) Accessible with proper ARIA labels Can animate with CSS or SMIL Single format handles all sizes Where to Get Free SVG Icons IconKing SVG Library — 254+ free SVG icons in flat and outline styles. Covers UI, social media, food, objects, and more. Downloadable as individual SVG, AI, or PNG files. No account required. What sets IconKing apart: many icons have matching animated Lottie versions in the Lottie library — useful when you want an animated hover state that matches your static icon. Other solid free sources: Heroicons (heroicons.com) — MIT, Tailwind-made, 292 icons Phosphor Icons (phosphoricons.com) — MIT, 1,248 icons, 6 weights Lucide (lucide.dev) — ISC, 1,400+ icons, React/Vue packages Tabler Icons (tabler.io/icons) — MIT, 5,000+ icons Method 1: Inline SVG Best for: small number of icons, need CSS styling <!-- Inline the SVG directly --> <button aria-label= "Close" > <svg width= "20" height= "20" viewBox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" > <line x1= "18" y1= "6" x2= "6" y2= "18" /> <line x1= "6" y1= "6" x2= "18" y2= "18" /> </svg> </button> The stroke="currentColor" means the icon inherits its color from the parent element's CSS color property — trivial theming. Method 2: SVG Sprite Best for: many icons, better performance (single HTTP request) Bui