-
pro-{icon.iconName}
+
+ pro-{icon.iconName}
+
+
-
+
-
- {``}
-
-
- {``}
-
-
- {``}
-
-
- {icon.svgContent}
-
+
+
+ Font
+ SVG
+ React
+
+
+
+
+
+
+
+
+ {icon.svgContent}
+
+
+
+
+
+
+
+
+ {``}
+
+
+ `}
+ />
+
+
+
);
}
-const CopyButton = ({ copyText }: { copyText: string }) => {
+const CopyButton = ({ text, successText, copyText }: { text?: string; successText?: string; copyText: string }) => {
const [copied, setCopied] = useState(false);
const handleCopyClick = async () => {
@@ -108,7 +153,7 @@ const CopyButton = ({ copyText }: { copyText: string }) => {
return (
);
}
@@ -118,7 +163,38 @@ const CopyButton = ({ copyText }: { copyText: string }) => {
onClick={handleCopyClick}
className="text-md flex items-center font-medium bg-orange-500 hover:bg-orange-500/80 transition-all gap-1 px-3 py-2 rounded-xl text-white"
>
- Copy SVG
+ {text ? text :
}
+
+ );
+};
+
+const CopyIconButton = ({ copyText }: { copyText: string }) => {
+ const [copied, setCopied] = useState(false);
+
+ const handleCopyClick = async () => {
+ try {
+ await navigator.clipboard.writeText(copyText);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ } catch (err) {
+ console.error('Failed to copy text: ', err);
+ }
+ };
+
+ if (copied) {
+ return (
+
+ );
+ }
+
+ return (
+
);
};
diff --git a/packages/website/src/contents/docs/getting-started/introduction.mdx b/packages/website/src/contents/docs/getting-started/introduction.mdx
deleted file mode 100644
index f9d1a21b..00000000
--- a/packages/website/src/contents/docs/getting-started/introduction.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
----
-title: Introduction
-description: Proxy Icon offers a sleek, open-source collection of 2500+ minimalist icons, ideal for both designers and developers. Unlike many icon libraries that can feel disjointed, Proxy Icon provides a cohesive set, with each icon meticulously crafted for clarity and visual consistency. Available in both 'Outlined' and 'Filled' styles, these icons are designed on a 24x24 grid to ensure pixel-perfect precision. Best of all, Proxy Icon is completely free to use in both personal and commercial projects.
----
-
-
-
-
-
-
-
-
diff --git a/packages/website/src/contents/docs/installation/cdn.mdx b/packages/website/src/contents/docs/installation/cdn.mdx
deleted file mode 100644
index 2ce9f4ed..00000000
--- a/packages/website/src/contents/docs/installation/cdn.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: CDN Installation
-description: Installation guide using a CDN link for Proxy Icons.
----
-
-## Installation Steps
-
-1. **Add CDN Link**: To integrate Proxy Icons into your project, copy the following CDN link and paste it within the `` tag of your HTML document:
-
- ```html
-
- ```
-
- Alternatively, you can download the
proxy-icons.css file and include it in the `` tag of your HTML document.
-
-2. **Use Icons**: To use an icon, add an `
` tag with the appropriate class name. The class name follows the convention: `pro-{name}-{style}`.
-
- ```html
-
- ```
-
- Note: Replace `{name}` with the icon name and `{style}` with the desired style (e.g., line for outlined icons or fill for filled icons).
-
-3. **Sizing**: You can resize Proxy Icons using inline styles or predefined classes. For example:
-
- ```html
-
- ```
-
- If you're using a CSS framework like Tailwind CSS or Bootstrap, you can apply their text sizing classes directly:
-
- ```html
-
-
-
- ```
diff --git a/packages/website/src/contents/docs/installation/react.mdx b/packages/website/src/contents/docs/installation/react.mdx
deleted file mode 100644
index 96f10e6b..00000000
--- a/packages/website/src/contents/docs/installation/react.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: React Installation
-description: Installation guide for using Proxy Icons as React components.
----
-
-## Installation Steps
-
-1. **Install the Package**: Add the Proxy Icons package to your React project using npm, yarn, or pnpm.
-
- ```bash
- npm install proxy-icons
- # or
- yarn add proxy-icons
- # or
- pnpm install proxy-icons
- ```
-
-2. **Usage**: Import the desired icon and use it within your React components.
-
- ```jsx
- import { ProUserFill } from 'proxy-icons';
-
- const MyComponent = () => {
- return (
-
- );
- };
- ```
-
- Note: Replace ProUserFill with any icon component from the proxy-icons package that suits your needs.
-
-3. **Sizing**: Apply styles or classes to adjust the size of your icons.
-
- ```jsx
- import { ProUserFill } from 'proxy-icons';
-
- const MyComponent = () => {
- return (
-
- );
- };
- ```
-
-Note: The example shows using Tailwind CSS for sizing with text-xs, but you can customize this based on your CSS framework or design system.
-
-## Additional Notes
-
-- **Icon Import:** Only import the icons you need to keep your bundle size small.
-- **Custom Styles:** You can further customize the icons using additional CSS classes or inline styles as required.
-- **Responsive Sizing:** Consider using responsive classes or media queries to adjust icon sizes based on screen size.
-
-This refined version enhances clarity, offers more detailed instructions, and includes additional notes to help with efficient usage in React projects. Let me know if you need further adjustments!
diff --git a/packages/website/src/lib/markdown.tsx b/packages/website/src/lib/markdown.tsx
deleted file mode 100644
index 062aca3e..00000000
--- a/packages/website/src/lib/markdown.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { compileMDX } from 'next-mdx-remote/rsc';
-import path from 'path';
-import { promises as fs } from 'fs';
-import remarkGfm from 'remark-gfm';
-import rehypePrism from 'rehype-prism-plus';
-import rehypeAutolinkHeadings from 'rehype-autolink-headings';
-import rehypeSlug from 'rehype-slug';
-import rehypeCodeTitles from 'rehype-code-titles';
-import { page_routes } from './routes-config';
-import { visit } from 'unist-util-visit';
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/common/tabs';
-import Pre from '@/components/docs/pre';
-
-type MdxFrontmatter = {
- title: string;
- description: string;
-};
-
-// add custom components
-const components = {
- Tabs,
- TabsContent,
- TabsList,
- TabsTrigger,
- pre: Pre,
-};
-
-export async function getMarkdownForSlug(slug: string) {
- try {
- const contentPath = getContentPath(slug);
- const rawMdx = await fs.readFile(contentPath, 'utf-8');
- return await compileMDX({
- source: rawMdx,
- options: {
- parseFrontmatter: true,
- mdxOptions: {
- rehypePlugins: [preProcess, rehypeCodeTitles, rehypePrism, rehypeSlug, rehypeAutolinkHeadings, postProcess],
- remarkPlugins: [remarkGfm],
- },
- },
- components,
- });
- } catch (err) {
- console.log(err);
- }
-}
-
-export async function getTocs(slug: string) {
- const contentPath = getContentPath(slug);
- const rawMdx = await fs.readFile(contentPath, 'utf-8');
- // captures between ## - #### can modify accordingly
- const headingsRegex = /^(#{2,4})\s(.+)$/gm;
- let match;
- const extractedHeadings = [];
- while ((match = headingsRegex.exec(rawMdx)) !== null) {
- const headingLevel = match[1].length;
- const headingText = match[2].trim();
- const slug = sluggify(headingText);
- extractedHeadings.push({
- level: headingLevel,
- text: headingText,
- href: `#${slug}`,
- });
- }
- return extractedHeadings;
-}
-
-export function getPreviousNext(path: string) {
- const index = page_routes.findIndex(({ href }: { href: string }) => href == path);
- return {
- prev: page_routes[index - 1],
- next: page_routes[index + 1],
- };
-}
-
-function sluggify(text: string) {
- const slug = text.toLowerCase().replace(/\s+/g, '-');
- return slug.replace(/[^a-z0-9-]/g, '');
-}
-
-function getContentPath(slug: string) {
- return path.join(process.cwd(), '/src/contents/docs/', `${slug}.mdx`);
-}
-
-// for copying the code
-const preProcess = () => (tree: any) => {
- visit(tree, (node: any) => {
- if (node?.type === 'element' && node?.tagName === 'pre') {
- const [codeEl] = node.children;
- if (codeEl.tagName !== 'code') return;
- node.raw = codeEl.children?.[0].value;
- }
- });
-};
-
-const postProcess = () => (tree: any) => {
- visit(tree, 'element', (node: any) => {
- if (node?.type === 'element' && node?.tagName === 'pre') {
- node.properties['raw'] = node.raw;
- // console.log(node);
- }
- });
-};
diff --git a/packages/website/src/lib/routes-config.ts b/packages/website/src/lib/routes-config.ts
deleted file mode 100644
index 55bbdea3..00000000
--- a/packages/website/src/lib/routes-config.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// for page navigation & to sort on leftbar
-export const ROUTES = [
- {
- title: 'Getting Started',
- href: 'getting-started',
- items: [{ title: 'Introduction', href: '/introduction' }],
- },
- {
- title: 'Installation',
- href: 'installation',
- items: [
- { title: 'CDN', href: '/cdn' },
- { title: 'React', href: '/react' },
- ],
- },
-];
-
-export const page_routes = ROUTES.map(({ href, items }) => {
- return items.map((link) => {
- return {
- title: link.title,
- href: href + link.href,
- };
- });
-}).flat();
diff --git a/packages/website/tailwind.config.ts b/packages/website/tailwind.config.ts
index 7239cdc8..748926a3 100644
--- a/packages/website/tailwind.config.ts
+++ b/packages/website/tailwind.config.ts
@@ -18,6 +18,6 @@ const config: Config = {
},
},
},
- plugins: [],
+ plugins: [require('tailwindcss-animate')],
};
export default config;