https://cgov.com.au/_next/static/chunks/pages/styleguide/core-elements/icons-d6f25b08fa989fc6.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[99518,68192],{68192:function(e,n,s){"use strict";s.r(n);var c,i,t=s(67294);function r(){return(r=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var s=arguments[n];for(var c in s)Object.prototype.hasOwnProperty.call(s,c)&&(e[c]=s[c])}return e}).apply(this,arguments)}n.default=function(e){return t.createElement("svg",r({viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),c||(c=t.createElement("g",{clipPath:"url(#clip0_30798_297837)"},t.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M8.26884 2.99217C9.45176 2.50219 10.7196 2.25 12 2.25C13.2804 2.25 14.5482 2.50219 15.7312 2.99217C16.9141 3.48216 17.9889 4.20034 18.8943 5.10571C19.7997 6.01108 20.5178 7.08591 21.0078 8.26884C21.4978 9.45176 21.75 10.7196 21.75 12C21.75 13.2804 21.4978 14.5482 21.0078 15.7312C20.5178 16.9141 19.7997 17.9889 18.8943 18.8943C17.9889 19.7997 16.9141 20.5178 15.7312 21.0078C14.5482 21.4978 13.2804 21.75 12 21.75C10.7196 21.75 9.45176 21.4978 8.26884 21.0078C7.08591 20.5178 6.01108 19.7997 5.10571 18.8943C4.20034 17.9889 3.48216 16.9141 2.99217 15.7312C2.50219 14.5482 2.25 13.2804 2.25 12C2.25 10.7196 2.50219 9.45176 2.99217 8.26884C3.48216 7.08591 4.20034 6.01108 5.10571 5.10571C6.01108 4.20034 7.08591 3.48216 8.26884 2.99217ZM12 3.75C10.9166 3.75 9.8438 3.96339 8.84286 4.37799C7.84193 4.7926 6.93245 5.40029 6.16637 6.16637C5.40029 6.93245 4.79259 7.84193 4.37799 8.84286C3.96339 9.8438 3.75 10.9166 3.75 12C3.75 13.0834 3.96339 14.1562 4.37799 15.1571C4.79259 16.1581 5.40029 17.0675 6.16637 17.8336C6.93245 18.5997 7.84193 19.2074 8.84286 19.622C9.8438 20.0366 10.9166 20.25 12 20.25C13.0834 20.25 14.1562 20.0366 15.1571 19.622C16.1581 19.2074 17.0675 18.5997 17.8336 17.8336C18.5997 17.0675 19.2074 16.1581 19.622 15.1571C20.0366 14.1562 20.25 13.0834 20.25 12C20.25 10.9166 20.0366 9.8438 19.622 8.84286C19.2074 7.84193 18.5997 6.93245 17.8336 6.16637C17.0675 5.40029 16.1581 4.7926 15.1571 4.37799C14.1562 3.96339 13.0834 3.75 12 3.75Z",fill:"currentColor"}),t.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M15.5303 9.46967C15.8232 9.76256 15.8232 10.2374 15.5303 10.5303L11.5303 14.5303C11.2374 14.8232 10.7626 14.8232 10.4697 14.5303L8.46967 12.5303C8.17678 12.2374 8.17678 11.7626 8.46967 11.4697C8.76256 11.1768 9.23744 11.1768 9.53033 11.4697L11 12.9393L14.4697 9.46967C14.7626 9.17678 15.2374 9.17678 15.5303 9.46967Z",fill:"currentColor"}))),i||(i=t.createElement("defs",null,t.createElement("clipPath",{id:"clip0_30798_297837"},t.createElement("rect",{width:24,height:24,fill:"currentColor"})))))}},9143:function(e,n,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/styleguide/core-elements/icons",function(){return s(17693)}])},17693:function(e,n,s){"use strict";s.r(n),s.d(n,{default:function(){return d}});var c=s(85893),i=s(95540),t=s(52803);function r(e){let{iconsList:n}=e;return(0,c.jsx)("section",{className:"project-examples sg-eg-icons",children:(0,c.jsx)("div",{className:"container",children:(0,c.jsx)("div",{className:"icons-wrapper",children:Object.keys(n).map(e=>{let n=e.replace(/-/g," ");return(0,c.jsxs)("div",{children:[(0,c.jsx)("div",{className:"svg-icon-wrapper",children:(0,c.jsx)(t.Z,{icon:e})}),(0,c.jsxs)("div",{className:"icon-details",children:[(0,c.jsx)("p",{className:"icon-name",children:n}),(0,c.jsx)("p",{className:"icon-file-name",children:e})]})]},"".concat(e))})})})})}var l=s(68192),a=s(25675),o=s.n(a);function d(e){let{title:n}=e;return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("div",{className:"container",children:(0,c.jsxs)("div",{className:"tw-prose tw-mt-10 tw-mb-6",children:[(0,c.jsx)("h1",{children:n}),(0,c.jsx)("p",{children:"Icons have three main use cases:"}),(0,c.jsxs)("ol",{className:"tw-not-prose",children:[(0,c.jsx)("li",{children:"Inline SVGs (normal icons)"}),(0,c.jsx)("li",{children:"Illustrations (inline img src)"}

1),(0,c.jsx)("li",{children:"Background CSS icons (inline svg src url in SCSS)"}),(0,c.jsx)("li",{children:"React components"})]}),(0,c.jsx)("h2",{children:"1. Inline SVGs"}),(0,c.jsx)("h3",{children:"How to Use"}),(0,c.jsx)(i.Z,{code:'interface IconProps {\n    icon: Icons; //any valid kebab-case icon name form the list below.\n    className?: string;\n    size?: "md | base | lg | xl (default)  | 2xl | 3xl | 4xl | 5xl" \n}\n\n<Icon ...props above />\n'}),(0,c.jsx)("h2",{children:"Size Examples"})]})}),(0,c.jsx)("div",{className:"container",children:(0,c.jsx)("div",{className:"tw-prose tw-mt-10 tw-mb-6",children:(0,c.jsx)("div",{className:"tw-flex tw-items-center"})})}),(0,c.jsxs)("div",{className:"container",children:[(0,c.jsx)("div",{className:"tw-prose tw-mt-10 tw-mb-6",children:(0,c.jsx)("h3",{children:"Avant Icons"})}),(0,c.jsx)(r,{iconsList:Object.keys(t.N).reduce((e,n)=>((n.startsWith("avant-")||n.startsWith("cgov-"))&&(e[n]=t.N[n]),e),{})})]}),(0,c.jsx)("br",{}),(0,c.jsxs)("div",{className:"container",children:[(0,c.jsx)("div",{className:"tw-prose tw-mt-10 tw-mb-6",children:(0,c.jsx)("h3",{children:"System Icons"})}),(0,c.jsx)(r,{iconsList:Object.keys(t.N).reduce((e,n)=>(n.startsWith("avant-")||n.startsWith("cgov-")||(e[n]=t.N[n]),e),{})})]}),(0,c.jsx)("div",{className:"container",children:(0,c.jsxs)("div",{className:"tw-prose tw-mt-10 tw-mb-6",children:[(0,c.jsx)("h2",{children:"2. Background SVGs"}),(0,c.jsxs)("p",{children:["Set directly in the CSS. If you need to change the background colour, use ",(0,c.jsx)("a",{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/mask",children:"CSS Masks"}),"."]}),(0,c.jsx)("h3",{children:"How to Use (and change colour)"}),(0,c.jsx)(i.Z,{code:'<div class="background-icon-change-colour"></div>',language:"handlebars"}),(0,c.jsx)(i.Z,{code:".background-icon-change-colour {\n    background: blue;\n    mask-image: url('/icons/chevron-up.svg');\n    mask-position: center center;\n    mask-repeat: no-repeat;\n}\n",language:"scss"}),(0,c.jsx)("div",{className:"background-icon-change-colour"}),(0,c.jsx)("h2",{children:"3. Using plain image tag or Next JS Image component"}),(0,c.jsx)("h3",{children:"Plain Image Tag"}),(0,c.jsx)(i.Z,{code:'<img src="/icons/arrow-down-circle.svg" width="30" />'}),(0,c.jsx)("img",{src:"/icons/arrow-down-circle.svg",width:"30"}),(0,c.jsx)("h3",{children:"Next JS Image component"}),(0,c.jsx)(i.Z,{code:'import NextImage from \'next/image\';\n\n<NextImage src="/icons/book-open.svg" width="30" height="30"/>\n'}),(0,c.jsx)(o(),{src:"/icons/arrow-right-circle.svg",alt:"Icon",width:30,height:30}),(0,c.jsx)("h2",{children:"4. SVG as React component"}),(0,c.jsx)(i.Z,{code:'import CheckCircle from "~icons/check-circle-outline.svg";\n\n<CheckCircle width="30" height="30" />\n'}),(0,c.jsx)(l.default,{width:"30"})]})})]})}},95540:function(e,n,s){"use strict";s.d(n,{Z:function(){return l}});var c=s(85893),i=s(67294),t=s(15660),r=s.n(t);function l(e){let{code:n,language:s="typescript"}=e;return(0,i.useEffect)(()=>{r().highlightAll()},[]),(0,c.jsx)("pre",{className:"language-".concat(s||"tsx"),children:(0,c.jsx)("code",{children:n})})}s(39980),s(96836),s(62356),s(21029),s(92447),s(15251)}},function(e){e.O(0,[68182,49774,92888,40179],function(){return e(e.s=9143)}),_N_E=e.O()}]);