@epilot360/icons 1.17.3 → 1.17.4

package/iac/cdk.out/asset.054df043647c2ed00cda930cd5719378b4cdd590f6b9efe3e4cce2adf7a7b6fc/stories-Readme-mdx.7b78b305.iframe.bundle.js

@@ -0,0 +1,42 @@
+"use strict";(()=>{(self.webpackChunk_epilot360_icons=self.webpackChunk_epilot360_icons||[]).push([[9775],{"./src/stories/Readme.mdx":(h,i,s)=>{s.r(i),s.d(i,{default:()=>a});var m=s("./node_modules/react/index.js"),n=s("./node_modules/react/jsx-runtime.js"),t=s("./node_modules/@mdx-js/react/lib/index.js"),l=s("./node_modules/@storybook/blocks/dist/index.mjs"),r=s("./src/stories/SearchComponent.tsx");function c(o){const e=Object.assign({h1:"h1",p:"p",a:"a",img:"img",pre:"pre",code:"code",h2:"h2"},(0,t.ah)(),o.components);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(l.h_,{title:"Readme"}),`
+`,(0,n.jsx)(e.h1,{id:"epilot360icons",children:"@epilot360/icons"}),`
+`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.a,{href:"#",children:(0,n.jsx)(e.img,{src:"http://img.shields.io/:license-mit-blue.svg",alt:"License"})}),`
+`,(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/@epilot360/icons",target:"_blank",rel:"nofollow noopener noreferrer",children:(0,n.jsx)(e.img,{src:"https://img.shields.io/npm/v/@epilot360/icons.svg",alt:"npm version"})})]}),`
+`,(0,n.jsxs)(e.p,{children:["Curated set of epilot icons based on ",(0,n.jsx)(e.a,{href:"https://www.npmjs.com/package/material-symbols",target:"_blank",rel:"nofollow noopener noreferrer",children:"material-symbols"})]}),`
+`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{children:`yarn add @epilot360/icons
+`})}),`
+`,(0,n.jsx)(e.h2,{id:"usage",children:"Usage"}),`
+`,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"@epilot360/icons"})," package is shipped as an external system module in the 360 portal."]}),`
+`,(0,n.jsx)(e.p,{children:"You can import any icon as a React component by name:"}),`
+`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import { Edit as EditIcon, EpilotIcon } from '@epilot360/icons'
+
+<EditIcon />
+// or
+<EpilotIcon name="edit" />
+`})}),`
+`,(0,n.jsx)(e.h2,{id:"usage-outside-360-portal",children:"Usage outside 360 portal"}),`
+`,(0,n.jsxs)(e.p,{children:["To avoid bundling the entire ",(0,n.jsx)(e.code,{children:"@epilot360/icons"})," library, you can import the module directly:"]}),`
+`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import EditIcon from '@epilot360/icons/react/Edit'
+
+<EditIcon />
+`})}),`
+`,(0,n.jsx)(e.h2,{id:"using-svg",children:"Using SVG"}),`
+`,(0,n.jsxs)(e.p,{children:["To directly use svg files shipped as part of this package, e.g. with ",(0,n.jsx)(e.code,{children:"file-loader"})," you can import from:"]}),`
+`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import EditIconSVG from '@epilot360/icons/svg/Edit/icon.svg'
+import EditIconSVGFill from '@epilot360/icons/svg/Edit/icon-fill.svg'
+
+<img src={EditIconSVG} />
+`})}),`
+`,(0,n.jsx)(e.h2,{id:"using-svgicon",children:"Using svgIcon()"}),`
+`,(0,n.jsxs)(e.p,{children:["The ",(0,n.jsx)(e.code,{children:"svgIcon()"})," function returns the raw SVG as a string."]}),`
+`,(0,n.jsx)(e.pre,{children:(0,n.jsx)(e.code,{className:"language-tsx",children:`import { svgIcon } from '@epilot360/icons';
+
+<div dangerouslySetInnerHTML={{ __html: svgIcon({ name: 'epilot' }) }} />
+
+<pre>
+  {svgIcon({ name: 'epilot', variant: 'filled', width: 48, height: 48, fill: 'white' })}
+</pre>
+`})}),`
+`,(0,n.jsx)(e.h1,{id:"all-icons",children:"All Icons"}),`
+`,`
+`,(0,n.jsx)(r.g,{})]})}function d(o={}){const{wrapper:e}=Object.assign({},(0,t.ah)(),o.components);return e?(0,n.jsx)(e,Object.assign({},o,{children:(0,n.jsx)(c,o)})):c(o)}const a=d}}]);})();