Minor fixes lucide.dev (#518)

* Minor fixes site

* update to next 12.1

site/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: ['next/babel'],
-};

site/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

site/next.config.js

@@ -1,19 +1,13 @@
 /* eslint-disable no-undef */
 module.exports = {
-  webpack: (config, options) => {
+  webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,
-      use: [
-        {
-          loader: 'babel-loader',
-        },
-        {
-          loader: 'react-svg-loader',
-          options: {
-            jsx: true,
-          },
-        },
-      ],
+      issuer: {
+        and: [/\.(js|ts)x?$/],
+      },
+
+      use: ['@svgr/webpack'],
     });
 
     return config;

site/package.json

@@ -19,6 +19,7 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@next/mdx": "^11.0.0",
+    "@svgr/webpack": "^6.2.1",
     "downloadjs": "^1.4.7",
     "framer-motion": "^4",
     "fuse.js": "^6.5.3",
@@ -27,12 +28,12 @@
     "jszip": "^3.7.0",
     "lodash": "^4.17.20",
     "lucide-react": "0.14.0",
-    "next": "^11.1.3",
+    "next": "12",
     "next-mdx-remote": "^3.0.2",
     "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-color": "^2.19.3",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-svg-loader": "^3.0.3"
   },
   "devDependencies": {

site/src/components/Header.tsx

@@ -11,6 +11,7 @@ import Vue3Logo from '../../public/framework-logos/vue-next.svg';
 import PreactLogo from '../../public/framework-logos/preact.svg';
 import AngularLogo from '../../public/framework-logos/angular.svg';
 import FlutterLogo from '../../public/framework-logos/flutter.svg';
+import SvelteLogo from '../../public/framework-logos/svelte.svg';
 
 function generateZip(icons) {
   const zip = new JSZip();
@@ -50,6 +51,11 @@ const Header = ({ data }) => {
       Logo: Vue3Logo,
       href: '/docs/lucide-vue-next',
     },
+    {
+      name: 'lucide-svelte',
+      Logo: SvelteLogo,
+      href: '/docs/lucide-svelte',
+    },
     {
       name: 'lucide-preact',
       Logo: PreactLogo,

site/src/components/IconList.tsx

@@ -14,7 +14,7 @@ const IconList = memo(({ icons }: IconListProps) => {
 
   return (
     <Grid templateColumns={`repeat(auto-fill, minmax(150px, 1fr))`} gap={5} marginBottom="320px">
-      {icons.map((icon) => {
+      {icons.map(icon => {
         return (
           <Link
             key={icon.name}

site/src/components/IconListItem.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
+import { Box, Button, ButtonProps, Flex, Text, useToast } from '@chakra-ui/react';
 import download from 'downloadjs';
 import copy from 'copy-to-clipboard';
 import { memo, useContext } from 'react';
@@ -22,8 +22,10 @@ const IconListItem = ({ name, content, src, onClick }: IconListItemProps) => {
       variant="ghost"
       borderWidth="1px"
       rounded="lg"
-      padding={16}
+      padding={2}
+      height={32}
       position="relative"
+      whiteSpace="normal"
       onClick={event => {
         if (event.shiftKey) {
           copy(src);
@@ -44,15 +46,21 @@ const IconListItem = ({ name, content, src, onClick }: IconListItemProps) => {
       key={name}
       alignItems="center"
     >
-      <Flex direction="column" align="center" justify="center">
-        <IconWrapper
-          content={content}
-          stroke={color}
-          strokeWidth={strokeWidth}
-          height={size}
-          width={size}
-        />
-        <Text marginTop={5}>{name}</Text>
+      <Flex direction="column" align="center" justify="stretch" width="100%" gap={4}>
+        <Flex flex={2} flexBasis="100%" minHeight={10} align="flex-end">
+          <IconWrapper
+            content={content}
+            stroke={color}
+            strokeWidth={strokeWidth}
+            height={size}
+            width={size}
+          />
+        </Flex>
+        <Flex flex={1} minHeight={10} align="center">
+          <Text wordBreak="break-word" maxWidth="100%">
+            {name}
+          </Text>
+        </Flex>
       </Flex>
     </Button>
   );

site/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -12,8 +16,17 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
-  "exclude": ["node_modules", "use-popper.d.ts", "*.md"],
-  "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx"]
+  "exclude": [
+    "node_modules",
+    "use-popper.d.ts",
+    "*.md"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ]
 }