https://pika.style/_next/static/chunks/pages/templates/icon-image-maker-3ce2371e797f0416.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6264],{25242:(e,t,s)=>{"use strict";s.r(t),s.d(t,{__N_SSG:()=>_,default:()=>E});var i=s(75038),a=s(76430),n=s(58454),o=s(73982),r=s(71623),c=s(93646),l=s(28276),d=s(12075),u=s(41075),g=s(8557),x=s(89934),m=s(97181),p=s(63166),h=s(94548),f=s(60509),v=s(14661),j=s(50876);s(56816);var y=s(36791),k=s(83390);let b=({iconEl:e,setIconEl:t,options:s,image:n,isSaving:o,isSafari:c})=>{let l=(0,a.useRef)();return(0,a.useEffect)(()=>{l?.current&&l?.current?.focus()},[]),(0,i.jsx)("div",{className:"flex flex-col justify-center items-center",children:(0,i.jsx)(k.T8,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},children:(0,i.jsx)("div",{className:(0,r.A)("p-4 leading-none aspect-square flex items-center justify-center relative",s?.iconBackground==="rgba(255, 255, 255, 0)"||s?.iconBackground==="transparent"||s?.iconBackground==="#ffffff00"?"":"shadow-lg backdrop-blur-sm"),style:{background:`${s?.iconBackground||"#111"}`,color:`${s?.iconTextColor||"#111"}`,borderRadius:`${s?.imageRoundness}px`},children:(0,i.jsx)(y.ar,{icon:e?.key,trigger:(0,i.jsx)(k.m_,{text:"Select icon",children:(0,i.jsx)("div",{style:{filter:`drop-shadow(${j.C[s?.imageShadow].css})`},children:(0,i.jsx)("i",{style:{fontSize:`${s?.iconSize}px`},className:(0,r.A)("cursor-pointer",e?.key)})})}),setIcon:t})})})})};var w=s(58742);let S=({canvasRef:e,options:t,iconEl:s,setIconEl:o,isSaving:j,setOptions:y,outputSize:w,image:S})=>{let N,{isPro:C,c_HandleNonPro:z}=(0,a.useContext)(n.A),[A,R]=(0,a.useState)(null),[T,_]=(0,a.useState)(),[E,I]=(0,a.useState)(),[O,$]=(0,a.useState)(0),P=({type:e})=>{if(!C)return void z({text:"Upgrade to Pro to add shapes in canvas"});let t={id:+new Date,type:"rectangle",opacity:1,background:"#c489f8",zIndex:30,blur:0,borderWidth:2,borderColor:"#9f54f4"},s={...t,id:+new Date,type:"highlight"},i={...t,id:+new Date,type:"circle"},a={...t,id:+new Date,type:"square"};switch(e){case"rectangle":I(e=>e?.length?[...e,t]:[t]);break;case"circle":I(e=>e?.length?[...e,i]:[i]);break;case"square":I(e=>e?.length?[...e,a]:[a]);break;case"highlight":I(e=>e?.length?[...e,s]:[s])}},Y=[{src:(0,i.jsx)(b,{iconEl:s,setIconEl:o,options:t,isSaving:j,isSafari:A,image:S})}];return(0,a.useEffect)(()=>{R(/^((?!chrome|android).)*safari/i.test(navigator?.userAgent))},[]),(0,i.jsxs)("div",{className:"flex flex-col w-full",children:[(0,i.jsx)(()=>(0,i.jsx)(l.ER,{children:(0,i.jsxs)("div",{className:"ml-auto flex items-center space-x-4",children:[(0,i.jsx)(l.sc,{shapesStack:E,setShapesStack:I,trigger:(0,i.jsx)(k.ms,{trigger:(0,i.jsx)(k.$n,{variant:"secondary",suffix:(0,i.jsx)(u.A,{size:15}),className:(0,r.A)("text-sm focus:z-10",E?.length?"rounded-r-none! ":""),children:(0,i.jsx)("span",{className:"hidden md:inline-flex mr-1",children:"Add"})}),items:[{icon:(0,i.jsx)(g.A,{size:15}),title:(0,i.jsx)(i.Fragment,{children:"Rectangle"}),onClick:()=>P({type:"rectangle"})},{icon:(0,i.jsx)(x.A,{size:15}),title:(0,i.jsx)(i.Fragment,{children:"Circle"}),onClick:()=>P({type:"circle"})},{icon:(0,i.jsx)(m.A,{size:15}),title:(0,i.jsx)(i.Fragment,{children:"Square"}),onClick:()=>P({type:"square"})},{icon:(0,i.jsx)(p.A,{size:15}),title:(0,i.jsx)(i.Fragment,{children:"Highlight"}),onClick:()=>P({type:"highlight"})}]}),listTrigger:(0,i.jsx)(k.m_,{text:"Manage Layers",children:(0,i.jsx)(k.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,i.jsx)(h.A,{size:14})})})}),(0,i.jsx)(l.RT,{textStack:T,setTextStack:_,trigger:(0,i.jsx)(k.$n,{variant:"secondary",prefix:(0,i.jsx)(f.A,{size:15}),className:(0,r.A)("text-sm focus:z-10",T?.length?"rounded-r-none! ":""),children:(0,i.jsx)("span",{className:"hidden md:inline-flex ml-1",children:"Text"})}),listTrigger:(0,i.jsx)(k.m_,{text:"Manage layers",children:(0,i.jsx)(k.$n,{variant:"secondary",className:"rounded-l-none! text-sm -ml-px px-1 focus:z-10",children:(0,i.jsx)(h.A,{size:14})})})})]})}),{}),(0,i.jsxs)("div",{ref:e,style:((N={}).aspectRatio=t?.canvasAspectRatio?.value,N.transform=`scale(${w?.canvasScale||1})`,t?.background?.active==="custom-color")?{...N,backgroundImage:`linear-gradient(${t?.background?.gradientDirection?.css??"to bottom right"}, ${t?.background?.customColor?.colorStart} 0%, ${t?.background?.customColor?.colorEnd} 100%`}:t?.background?.active==="image"?{...N,backgroundImage:`url(${t?.background?.image?.baseData}) `,backgroundPosition:"center",backgroundSize:"cover",backgroundRepeat:"no-repeat"}:N,className:(0,r.A)("canvas w-full duration-100 flex items-center justify-center py-[10%] max-w-full origin-top relative overflow-hidden",t?.background?.active==="gradient"&&t?.background?.gradientDirection?.tw,t?.background?.active==="gradient"&&t?.background?.gradient,t?.canvasAspectRatio?.value!=="auto"&&"useAutoHeight"),children:[(0,i.jsx)(c.Mx,{options:t}),(0,i.jsx)(c.Mt,{options:t}),(0,i.jsx)(c.$P,{textStack:T,setTextStack:_,options:t,setOptions:e=>y(t=>({...t,imageText:{...t.imageText,...e}}))}),(0,i.jsx)(c.E_,{shapesStack:E,setShapesStack:I,options:t}),j?C?"":(0,i.jsx)(d.yQ,{}):"",(0,i.jsx)("div",{style:{transform:`scale(${t?.imageScale||90}%) translateX(${t?.positionX||0}%) translateY(${t?.positionY||0}%)`},className:(0,r.A)("relative duration-100 w-full"),children:(0,i.jsx)(v.A,{tiltAngleXManual

1:t?.imageTilt?.angleX||0,tiltAngleYManual:t?.imageTilt?.angleY||0,className:(0,r.A)("w-full mx-auto"),children:(0,i.jsx)("div",{className:(0,r.A)("flex items-center justify-center text-left w-full h-full  focus:outline-none"),children:Y[O]?.src})})})]})]})};var N=s(72651);let C=({options:e,setOptions:t,image:s,setImage:r,saveImage:c,copyImage:l,imageRef:u})=>{let{isPro:g,c_HandleNonPro:x}=(0,a.useContext)(n.A);return(0,i.jsx)(o.E,{children:(0,i.jsxs)("div",{className:"w-full",children:[(0,i.jsx)("div",{className:"text-center text-gray-500 bg-gray-200 px-4 py-1 dark:bg-gray-900 w-full text-sm",children:"Content options"}),(0,i.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,i.jsx)(k.Ap,{min:10,max:512,defaultValue:100,stepValue:e?.iconSize,value:e?.iconSize,label:"Size",onChange:e=>t(t=>({...t,iconSize:e}))}),(0,i.jsx)(k.Ap,{min:0,max:100,label:"Roundness",defaultValue:10,value:e?.imageRoundness,stepValue:e?.imageRoundness,onChange:e=>t(t=>({...t,imageRoundness:e}))}),(0,i.jsx)(k.Ap,{min:0,max:10,label:"Shadow",stepValue:e?.imageShadow,value:e?.imageShadow,onChange:e=>t(t=>({...t,imageShadow:e}))}),(0,i.jsxs)("div",{className:"grid grid-cols-2 divide-x divide-gray-200 dark:divide-gray-800 border-b border-gray-200 dark:border-gray-800 ",children:[(0,i.jsxs)("div",{className:"py-2 px-4 flex items-center",children:[(0,i.jsx)("div",{className:"text-sm font-semibold",children:"Backgroun

1d"}),(0,i.jsx)("div",{className:"ml-auto",children:(0,i.jsx)(k.sk,{value:e?.iconBackground,onChange:e=>{g?t(t=>({...t,iconBackground:e})):x({text:"Upgrade to Pro to select note background color"})}})})]}),(0,i.jsxs)("div",{className:"py-2 px-4 flex items-center",children:[(0,i.jsx)("div",{className:"text-sm font-semibold",children:"Icon Color"}),(0,i.jsx)("div",{className:"ml-auto",children:(0,i.jsx)(k.sk,{value:e?.iconTextColor,onChange:e=>{g?t(t=>({...t,iconTextColor:e})):x({text:"Upgrade to Pro to select Note text color"})}})})]})]}),(0,i.jsxs)("div",{className:"flex w-full divide-x divide-gray-200 dark:divide-gray-800",children:[(0,i.jsx)(y.Ru,{options:e,setOptions:e=>t(t=>({...t,imageTilt:e}))}),(0,i.jsx)(y.yX,{options:e,setOptions:t})]})]}),(0,i.jsx)("div",{className:"text-center text-gray-500 bg-gray-200 px-4 py-1 dark:bg-gray-900 w-full text-sm",children:"Canvas options"}),(0,i.jsxs)("div",{className:"divide-y divide-gray-200 dark:divide-gray-800 w-full",children:[(0,i.jsx)(y.qU,{hideSizes:["aspect-adapt"],options:e,setOptions:e=>t(t=>({...t,canvasAspectRatio:e}))}),(0,i.jsx)(y.VS,{options:e,setOptions:t}),(0,i.jsx)(y.gE,{options:e,setOptions:t}),(0,i.jsx)(y.aR,{options:e,setOptions:t})]}),(0,i.jsx)(d.CR,{saveImage:c,copyImage:l,allowScaling:!0,imageRef:u})]})})};var z=s(17531),A=s.n(z),R=s(7880),T=s.n(R),_=!0;let E=e=>{let{currentTemplate:t}=e,s=(0,a.useRef)(),r=(0,a.useRef)(),{c_Session:c,c_SetStats:l,isPro:u}=(0,a.useContext)(n.A),[g,x]=(0,a.useState)(!1),[m,p]=(0,a.useState)({}),[h,f]=(0,a.useState)({w:null,h:null,canvasScale:1,vw:null,vh:null}),[v,j]=(0,a.useState)({key:"ph-app-store-logo",src:"",size:"",color:"#fff",opacity:1,blending:"",effect:"",label:"",description:""}),[y,b]=(0,a.useState)({background:{active:"gradient",gradientDirection:{css:"to top",tw:"bg-linear-to-t"},gradient:"from-[#5e88da] to-[#e3f0ff]",customColor:{colorStart:"#8abdf2",colorEnd:"#8abdf2"},image:{baseData:"/backgrounds/pika-5.png"}},canvasAspectRatio:{name:"Wide (16:9)",value:"16 / 9",key:"aspect-widescreen"},imageTilt:{angleX:0,angleY:0},watermark:{socials:{text:"",link:"yourwebsite.com",twitter:"handle",facebook:"",linkedin:"",youtube:"",instagram:""},logo:"",bgColor:"bg-gray-800/30",position:"bottom-0 justify-center",active:!1},imageWidth:90,imageShadow:5,positionX:0,positionY:0,imageRoundness:47,canvasRoundness:8,imageText:{active:!1,positionX:0,positionY:0,iconSize:80,textWidth:100,lineHeight:1.1,textColor:"#111",textAlignment:"center",size:1,position:"top",title:"Add your heading here",subTitle:"→ Go to Add Text to tweak this text\n→ You can add multi-line subtext here\n→You can also add a custom icon or logo here"},layout:{key:"style-1",tw:{first:"",second:"",third:""}},fontFamily:"Default",tweetSize:138,tweetWidth:88,fontSize:14,tweetTextColor:"#0f0f0f",tweetBackground:"#dc5151eb",showQuotes:!0,pattern:{value:"waves",name:"Waves",opacity:8,shapeSize:34,blending:"overlay",linesIntensity:11,patternIntensity:11,patternRotation:57,gridColor:"#ffffff",blur:0,colors:6},iconSize:170,iconWidth:76,iconTextColor:"#434343",iconBackground:"#ffffffa6"}),z=async({customScale:e="1x",format:t="png",fileNamePrefix:a}={})=>{let n;if(x(e=>(n=e,e)),n)return;let o=w.oR.loading((0,i.jsxs)(i.Fragment,{children:["Exporting image in ",(0,i.jsx)("span",{className:"uppercase ml-1",children:t}),"..."]}));x(!0),(0,N.vq)("template_save",{key:c?.email??""}),(0,N.i6)({ref:s?.current,format:t,customScale:e,fileNamePrefix:a,onSuccess:()=>{w.oR.success("Image exported!",{id:o}),R(),x(!1),c&&l({type:"template",exportType:"save",isPro:u})},onError:e=>{w.oR.error("Something went wrong, please try again",{id:o}),x(!1)}})},R=()=>{setTimeout(()=>{r?.current((0,N.Oe)({x:.1,y:.3})),r?.current((0,N.Oe)({x:.7,y:.9})),r?.current((0,N.Oe)({x:.8,y:.9})),r?.current((0,N.Oe)({x:.6,y:.9}))},300)};(0,a.useEffect)(()=>(_(),window.addEventListener("resize",_),()=>window.removeEventListener("resize",_)),[]);let _=()=>{let{innerWidth:e,innerHeight:t}=window;f(s=>({...s,vw:e,vh:t}))},E=()=>{setTimeout(()=>{f(e=>({...e,w:s?.current?.offsetWidth*window?.devicePixelRatio,h:s?.current?.offsetHeight*window?.devicePixelRatio,canvasScale:s?.current?.offsetHeight>h?.vh-100?1/(s?.current?.offsetHeight/(h?.vh-50)):1}))},300)};return(0,a.useEffect)(()=>{E()},[h?.vw,h?.vh,y,m]),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(A(),{children:(0,i.jsx)("link",{href:"https://cdn.jsdelivr.net/npm/[email protected]/src/css/icons.min.css",crossOrigin:"anonymous",rel:"stylesheet"})}),(0,i.jsx)(T(),{className:"fixed w-full h-full pointer-events-none z-200",onInit:({confetti:e})=>r.current=e}),(0,i.jsx)(o.S,{options:y,setOptions:b,autoHeight:!0,metaTitle:t?.metaTitle,metaDescription:t?.description,content:(0,i.jsx)(S,{options:y,setOptions:b,image:m,setImage:p,canvasRef:s,isPro:u,iconEl:v,setIconEl:j,isSaving:g,outputSize:h,updateOutputSize:E}),info:(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(d.Ax,{currentTemplate:t}),(0,i.jsx)(()=>{let e=[{title:"Select an icon",content:(0,i.jsxs)("div",{children:[(0,i.jsx)("p",{children:"Get started by selecting an icon. You can click on the icon in the canvas which will open Icon picker"}),(0,i.jsx)("br",{}),(0,i.jsx)("p",{children:'From the Icon picker you can select from hundreds of icons. You can also search and customize icon"s appearance from the options in the icon selector'})]}),gradientClass:"from-green-600 to-teal-700"},{title:"Customize the image",content:(0,i.jsxs)("div",{children:[(0,i.jsx)("p",{children:"On the right, you'll see bunch of customisation options like icon size, color, background etc."}),(0,i.jsx)("br",{}),(0,i.jsx)("p",{children:"Customize you icon image as you like. You can also add custom background and customize canvas size, background and more"})]}),gradientClass:"from-blue-500 to-indigo-700"},{title:"Export your image",content:(0,i.jsxs)("div",{children:[(0,i.jsxs)("p",{children:["Use shortcut ",(0,i.jsx)(k.iM,{children:"⌘+C"}),"/"," ",(0,i.jsx)(k.iM,{children:"Ctrl+C"})," to copy beautified image as PNG file to clipboard or ",(0,i.jsx)(k.iM,{children:"⌘+S"}),"/",(0,i.jsx)(k.iM,{children:"Ctrl+S"}),"to save it to your system. You can also save image in JPEG format"]}),(0,i.jsx)("br",{}),(0,i.jsxs)("p",{children:["Pro users can export images in size upto 4K resolution using the"," ",(0,i.jsx)(k.iM,{children:"2x"})," in the output size"]})]}),gradientClass:"from-orange-500 to-pink-700"}];return(0,i.jsx)(k.mc,{width:"1080px",className:"flex items-center justify-center mt-5 relative",children:(0,i.jsxs)("div",{className:"",children:[(0,i.jsx)("h2",{className:"text-2xl md:text-4xl text-center font-black mb-2 dark:text-white font-inter",children:"How to design icon images?"}),(0,i.jsx)("p",{className:"text-lg mb-12 text-center",children:"3 steps to use this icon image maker template"}),(0,i.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-10",children:e?.map((e,t)=>(0,i.jsxs)("div",{className:"flex flex-col items-center md:items-start justify-center md:justify-start",children:[(0,i.jsx)("div",{className:"\n                    flex items-center justify-center text-black/60 dark:text-gray-300 shadow-[0_0_44px_6px_#ff89c299] dark:shadow-[0_0_44px_2px_#dc2b81ba] mb-4 w-8 h-8 rounded-lg bg-linear-to-r bg-white dark:bg-black text-sm font-code font-semibold",children:t+1}),(0,i.jsx)("div",{className:"font-semibold my-4 dark:text-white text-xl",children:e?.title}),(0,i.jsx)("div",{className:"text-gray-700 dark:text-gray-200",children:e.content})]},e.title+t))})]})})},{}),(0,i.jsx)(d.S2,{})]}),sidebar:(0,i.jsx)(C,{options:y,setOptions:b,image:m,setImage:p,copyImage:({customScale:e="1x"}={})=>{let t,i=navigator?.userAgent?.indexOf("Firefox")<0;if(x(e=>(t=e,e)),t)return;

1let a=w.oR.loading("Copying image...");x(!0),(0,N.vq)("template_save",{key:c?.email??""}),(0,N.yq)({ref:s?.current,customScale:e,onSuccess:()=>{w.oR.success("Image copied to clipboard",{id:a}),R(),x(!1),c&&l({type:"template",exportType:"copy",isPro:u})},onError:e=>{i?w.oR.error("Something went wrong, please try again",{id:a}):w.oR.error("Firefox doesn't support copying image, please use save",{id:a}),x(!1)}})},saveImage:z,isPro:u,iconEl:v,setIconEl:j,imageRef:s?.current})})]})}},90773:(e,t,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/templates/icon-image-maker",function(){return s(25242)}])}},e=>{e.O(0,[4558,1178,407,7880,9539,303,1958,6394,5198,2075,2909,4510,636,6593,8792],()=>e(e.s=90773)),_N_E=e.O()}]);