// import "./icon";
// import "../theme/theme";
// import { html } from "lit";

// import icons from "./icons.json";
// // More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
// export default {
//   component: "sonic-icon",
//   title: "core/components/ui/Icon",
//   args: {
//     name: "circle-info",
//     size: "2xl",
//     prefix: "regular",
//   },
//   argTypes: {
//     name: {
//       control: {
//         type: "select",
//         options: ["--- regular ---", ...Object.keys(icons.regular)].concat([
//           "--- solid ---",
//           ...Object.keys(icons.solid),
//         ]),
//       },
//     },
//     prefix: {
//       control: {
//         type: "select",
//         options: ["regular", "solid"],
//       },
//     },
//     size: {
//       table: { category: "properties" },
//       description: "taille de l'icone",
//       control: {
//         type: "select",
//         options: ["", "xs", "sm", "md", "lg", "xl", "2xl"],
//       },
//     },
//     styles: { table: { category: "Internals or others" } },
//   },
// };

// const Template: any = ({ name, prefix, size }: { name: string; prefix: string; size: string }) => {
//   return html` <sonic-icon name="${name}" prefix="${prefix}" size="${size}"> </sonic-icon> `;
// };

// export const Example = Template.bind({});

// const listIconRegular: any = () => {
//   return html`
//     <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8">
//       ${Object.keys(icons.regular).map(
//         (icon: string) =>
//           html`<div class="text-center">
//             <sonic-icon name="${icon}" size="lg"></sonic-icon>
//             <br />
//             <div class="text-xs mt-2 text-neutral-400">${icon}</div>
//           </div>`
//       )}
//     </div>
    
//   `;
// };
// export const iconList = listIconRegular.bind({});



// const listIconLibrary: any = () => {
//   return html`
//     <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8">
//       <div class="text-center">
//         <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
//         <br>
//         <div class="text-xs mt-2 text-neutral-400">heroicons</div>
//       </div>
//       <div class="text-center">
//         <sonic-icon library="iconoir" name="2x2-cell"  size="lg"></sonic-icon>
//         <br>
//         <div class="text-xs mt-2 text-neutral-400">iconoir</div>
//       </div>
//       <div class="text-center">
//         <sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
//         <br>
//         <div class="text-xs mt-2 text-neutral-400">material</div>
//       </div>
//       <div class="text-center">
//         <sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
//         <br>
//         <div class="text-xs mt-2 text-neutral-400">fontAwesome</div>
//       </div>
//       <div class="text-center">
//         <sonic-icon library="feathers" name="activity"  size="lg"></sonic-icon>
//         <br>
//         <div class="text-xs mt-2 text-neutral-400">feathers</div>
//       </div>
//     </div>
    
//   `;
// };
// export const Online_library = listIconLibrary.bind({});