https://www.studypug.com/_next/static/chunks/pages/_dev/icons/editor-6614a771da19872d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[15788],{33115:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_dev/icons/editor",function(){return i(38989)}])},38989:function(e,t,i){"use strict";i.r(t),i.d(t,{__N_SSG:function(){return _},default:function(){return F}});var s=i(11527),r=i(99898),n=i(87332),o=i(30176),l=i(23278),a=i(31884),c=i(67030),d=i(65300),h=i(15588),x=i(51766),p=i(88934),u=i(25027),m=i(14985),v=i(93978),f=i(19842),g=i(45785),j=i(89096),b=i(2171),k=i.n(b),w=i(77385),Z=i.n(w),y=i(50959);function P(e){let{markup:t,label:i,detail:r,vars:n}=e,o=t.trim().startsWith("<svg");return(0,s.jsxs)(v.Z,{spacing:1,alignItems:"center",sx:{width:200},children:[(0,s.jsx)(d.Z,{style:n,sx:{width:80,height:80,display:"flex",alignItems:"center",justifyContent:"center",border:"1px solid",borderColor:"divider",borderRadius:2,bgcolor:"background.paper",overflow:"hidden","& svg":{width:40,height:40}},children:o?(0,s.jsx)(d.Z,{component:"span",sx:{display:"contents"},dangerouslySetInnerHTML:{__html:t}}):(0,s.jsx)(j.ZP,{variant:"caption",color:"text.thirdary",align:"center",sx:{px:1},children:"Paste SVG"})}),(0,s.jsx)(j.ZP,{variant:"caption",sx:{fontWeight:600},children:i}),(0,s.jsx)(j.ZP,{variant:"caption",color:"text.thirdary",align:"center",sx:{fontFamily:"monospace",fontSize:{xs:10},lineHeight:1.5,minHeight:30,whiteSpace:"pre-line"},children:r})]})}function S(e){let{label:t,value:i,onChange:r,disabled:n,disabledHint:o}=e;return(0,s.jsx)(g.ZP,{title:n?o:"",children:(0,s.jsxs)(d.Z,{sx:{opacity:n?.4:1},children:[(0,s.jsx)(j.ZP,{variant:"caption",color:"text.thirdary",sx:{display:"block",mb:.25},children:t}),(0,s.jsxs)(v.Z,{direction:"row",alignItems:"center",spacing:.75,children:[(0,s.jsx)(d.Z,{component:"input",type:"color",value:i,disabled:n,onChange:e=>r(e.target.value),sx:{width:36,height:32,p:0,border:"1px solid",borderColor:"divider",borderRadius:1,cursor:n?"not-allowed":"pointer",background:"none"}}),(0,s.jsx)(j.ZP,{variant:"caption",sx:{fontFamily:"monospace",fontSize:{xs:11}},children:i.toUpperCase()})]})]})})}let C="#0486A6",W={idle:"Save",saving:"Saving…",saved:"Saved!",error:"Save"};var _=!0;function F(){let[e,t]=(0,y.useState)(""),[i,b]=(0,y.useState)(""),[w,_]=(0,y.useState)("idle"),[F,$]=(0,y.useState)(""),[z,I]=(0,y.useState)(!1),[N,T]=(0,y.useState)(C),[E,G]=(0,y.useState)(C),[R,O]=(0,y.useState)(""),H=(0,y.useMemo)(()=>e.trim()?function(e){let t=RegExp("([ \\	]*)<(path|circle|rect|line|polyline|polygon|ellipse|use|image)([^>]*?)\\/>","gs");return e.replace(t,(e,t,i,s)=>{let r;let n=/([\w:-]+)="([^"]*)"/g,o=[];for(r=n.exec(s);null!==r;)o.push({name:r[1],value:r[2]}),r=n.exec(s);if(0===o.length)return`${t}<${i} />`;let l=o.find(e=>"d"===e.name),a=o.filter(e=>"d"!==e.name),c=`${t}    `,d=`${t}<${i}`;if(l&&(d+=` d="${l.value}"`),a.length>0){let e=a.map((e,t)=>`${c}${e.name}="${e.value}"${t===a.length-1?" />":""}`);d+=`
2${e.join("\n")}`}else d+=" />";return d})}(e.replace(/\bstroke="([^"]*)"/g,(e,t)=>t.startsWith("var(")?e:'stroke="var(--stroke-color, currentColor)"').replace(/\bfill="([^"]*)"/g,(e,t)=>"none"===t||t.startsWith("var(")?e:'fill="var(--fill-color, currentColor)"').replace(/\bstroke-width="([^"]*)"/g,(e,t)=>t.startsWith("var(")?e:`stroke-width="var(--stroke-width, ${t})"`)):"",[e]),V=(0,y.useMemo)(()=>(function(e){let t=/stroke="var\(--stroke-color,\s*([^)]*)\)"/.exec(e),i=/fill="var\(--fill-color,\s*([^)]*)\)"/.exec(e),s=/stroke-width="var\(--stroke-width,\s*([^)]*)\)"/.exec(e);return{strokeColor:t?t[1].trim():null,fillColor:i?i[1].trim():null,strokeWidth:s?s[1].trim():null,hasFillNone:/\bfill="none"/.test(e)}})(H),[H]),M=(0,y.useMemo)(()=>{let e={};return V.strokeColor&&(e["--stroke-color"]=N),V.fillColor&&(e["--fill-color"]=E),V.strokeWidth&&R.trim()&&(e["--stroke-width"]=R.trim()),e},[V,N,E,R]);(0,y.useEffect)(()=>{O(V.strokeWidth??"")},[V.strokeWidth]);let A=(0,y.useCallback)(()=>{T(C),G(C),O(V.strokeWidth??"")},[V.strokeWidth]),B=H?`stroke: ${V.strokeColor??"—"}
3fill: ${V.fillColor??(V.hasFillNone?"none":"—")}
4stroke-width: ${V.strokeWidth??"—"}`:"",J=H?Object.entries(M).map(e=>{let[t,i]=e;return`${t}: ${i}`}).join("\n")||"no overrides applied":"",L=(0,y.useCallback)(async()=>{t(await navigator.clipboard.readText())},[]),U=(0,y.useCallback)(()=>{H&&(navigator.clipboard.writeText(H),I(!0),window.setTimeout(()=>I(!1),1500))},[H]),X=i?i.endsWith(".svg")?i:`${i}.svg`:"",D=(0,y.useCallback)(async()=>

4{if(H&&X){_("saving"),$("");try{let e=await fetch("/api/_dev/save-icon",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({filename:X,content:H})});if(!e.ok){let t=await e.text(),i=`HTTP ${e.status}`;try{i=JSON.parse(t).error??i}catch{}throw Error(i)}_("saved"),window.setTimeout(()=>_("idle"),4e3)}catch(e){_("error"),$(e instanceof Error?e.message:"Unknown error")}}},[H,X]);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(k(),{children:[(0,s.jsx)("title",{children:"SVG Icon Editor — dev"}),(0,s.jsx)("meta",{name:"robots",content:"noindex,nofollow"})]}),(0,s.jsx)(d.Z,{sx:{p:{xs:2,md:4},maxWidth:1400,mx:"auto"},children:(0,s.jsxs)(v.Z,{spacing:3,children:[(0,s.jsxs)(d.Z,{children:[(0,s.jsxs)(d.Z,{component:Z(),href:"/_dev/icons",sx:{display:"inline-flex",alignItems:"center",gap:.5,typography:"body2",color:"text.thirdary",textDecoration:"none",mb:1,"&:hover":{color:"primary.main"}},children:[(0,s.jsx)(r.Z,{sx:{fontSize:16}}),"Icon Gallery"]}),(0,s.jsx)(j.ZP,{variant:"h4",sx:{mb:.5},children:"SVG Icon Editor"}),(0,s.jsxs)(j.ZP,{variant:"body2",color:"text.thirdary",children:["Paste raw SVG on the left. Hardcoded"," ",(0,s.jsx)("code",{children:"stroke"}),", ",(0,s.jsx)("code",{children:"fill"}),", and"," ",(0,s.jsx)("code",{children:"stroke-width"})," attributes are automatically converted to CSS variables and path elements are pretty-printed."]})]}),(0,s.jsxs)(v.Z,{direction:{xs:"column",md:"row"},spacing:2,children:[(0,s.jsxs)(d.Z,{sx:{flex:1},children:[(0,s.jsxs)(v.Z,{direction:"row",alignItems:"center",spacing:.5,sx:{mb:.75},children:[(0,s.jsx)(j.ZP,{variant:"subtitle2",sx:{flexGrow:1},children:"Original SVG"}),(0,s.jsx)(g.ZP,{title:"Paste from clipboard",children:(0,s.jsx)(u.ZP,{size:"small",onClick:L,children:(0,s.jsx)(l.Z,{sx:{fontSize:{xs:16}}})})})]}),(0,s.jsx)(f.ZP,{multiline:!0,fullWidth:!0,minRows:16,maxRows:32,placeholder:`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
5  <path d="M3 3V19..." stroke="#2B7FFF" stroke-width="2"
6    stroke-linecap="round" stroke-linejoin="round"/>
7</svg>`,value:e,onChange:e=>t(e.target.value),inputProps:{sx:{fontFamily:"monospace",fontSize:{xs:12}}}})]}),(0,s.jsxs)(d.Z,{sx:{flex:1},children:[(0,s.jsxs)(v.Z,{direction:"row",alignItems:"center",spacing:.5,sx:{mb:.75},children:[(0,s.jsx)(j.ZP,{variant:"subtitle2",sx:{flexGrow:1},children:"Converted SVG"}),H&&(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(x.ZP,{label:"auto-converted",size:"small",color:"success",variant:"outlined",sx:{fontSize:{xs:10},height:20}}),(0,s.jsx)(g.ZP,{title:z?"Copied!":"Copy output",children:(0,s.jsx)(u.ZP,{size:"small",onClick:U,children:(0,s.jsx)(o.Z,{sx:{fontSize:{xs:16},color:z?"success.main":"inherit"}})})})]})]}),(0,s.jsx)(f.ZP,{multiline:!0,fullWidth:!0,minRows:16,maxRows:32,value:H,placeholder:"Converted markup will appear here…",inputProps:{readOnly:!0,sx:{fontFamily:"monospace",fontSize:{xs:12}}}})]})]}),(0,s.jsx)(p.ZP,{}),(0,s.jsxs)(d.Z,{children:[(0,s.jsx)(j.ZP,{variant:"subtitle2",sx:{mb:.5},children:"Preview"}),(0,s.jsx)(j.ZP,{variant:"body2",color:"text.thirdary",sx:{mb:2},children:"Left renders the converted markup with no CSS variables set, so each value falls back to what the conversion baked in. Right applies the overrides — inputs an icon cannot respond to are disabled."}),(0,s.jsxs)(v.Z,{direction:"row",spacing:2.5,alignItems:"flex-end",flexWrap:"wrap",useFlexGap:!0,sx:{mb:2.5},children:[(0,s.jsx)(S,{label:"Fill color",value:E,onChange:G,disabled:!V.fillColor,disabledHint:V.hasFillNone?'This icon is fill="none" — nothing to fill':"No fill attribute in this icon"}),(0,s.jsx)(S,{label:"Stroke color",value:N,onChange:T,disabled:!V.strokeColor,disabledHint:"No stroke attribute in this icon"}),(0,s.jsx)(g.ZP,{title:V.strokeWidth?"":"No stroke-width attribute in this icon",children:(0,s.jsxs)(d.Z,{sx:{opacity:V.strokeWidth?1:.4},children:[(0,s.jsx)(j.ZP,{variant:"caption",color:"text.thirdary",sx:{display:"block",mb:.25},children:"Stroke width"}),(0,s.jsx)(f.ZP,{size:"small",type:"number",value:R,disabled:!V.strokeWidth,onChange:e=>O(e.target.value),placeholder:V.strokeWidth??"—",inputProps:{step:.1,min:0,sx:{fontFamily:"monospace",fontSize:{xs:13},py:.6}},sx:{width:96}})]})}),(0,s.jsx)(h.ZP,{size:"small",onClick:A,sx:{mb:.25},children:"Reset"})]}),(0,s.jsxs)(v.Z,{direction:"row",spacing:4,children:[(0,s.jsx)(P,{markup:H,label:"Converted default",detail:B,vars:{}}

7),(0,s.jsx)(P,{markup:H,label:"With overrides",detail:J,vars:M})]})]}),(0,s.jsx)(p.ZP,{}),(0,s.jsxs)(d.Z,{children:[(0,s.jsx)(j.ZP,{variant:"subtitle2",sx:{mb:.5},children:"Save to Icons Folder"}),(0,s.jsxs)(j.ZP,{variant:"body2",sx:{mb:1.5},children:["Writes to"," ",(0,s.jsxs)(d.Z,{component:"code",sx:{fontFamily:"monospace",fontSize:{xs:"0.85em"},bgcolor:"action.hover",px:.5,borderRadius:.5},children:["src/assets/images/icons/",X||"<filename>.svg"]}),"."]}),(0,s.jsxs)(v.Z,{direction:"row",spacing:1.5,alignItems:"flex-start",children:[(0,s.jsx)(f.ZP,{size:"small",label:"Filename",placeholder:"icon-my-icon",value:i,onChange:e=>{b(e.target.value),"idle"!==w&&_("idle")},sx:{minWidth:260},InputProps:{endAdornment:i&&!i.endsWith(".svg")?(0,s.jsx)(m.ZP,{position:"end",children:(0,s.jsx)(j.ZP,{variant:"caption",color:"text.thirdary",children:".svg"})}):null}}),(0,s.jsx)(h.ZP,{variant:"contained",startIcon:"saved"===w?(0,s.jsx)(n.Z,{}):(0,s.jsx)(a.Z,{}),onClick:D,disabled:!H||!i||"saving"===w,color:"saved"===w?"success":"primary",sx:{mt:.25},children:W[w]})]}),"error"===w&&(0,s.jsx)(c.ZP,{severity:"error",sx:{mt:1.5},children:F}),"saved"===w&&(0,s.jsxs)(c.ZP,{severity:"success",sx:{mt:1.5},children:["Saved to"," ",(0,s.jsxs)(d.Z,{component:"code",sx:{fontFamily:"monospace",fontSize:{xs:"0.85em"}},children:["src/assets/images/icons/",X]})]})]})]})})]})}}},function(e){e.O(0,[18881,85139,45374,46514,37630,51766,64637,92888,49774,40179],function(){return e(e.s=33115)}),_N_E=e.O()}]);