├── lib ├── main.ts ├── vite-env.d.ts ├── constants.ts ├── scripts │ ├── sortData.ts │ └── build.ts ├── icon.ts └── utils.ts ├── playground ├── vite-env.d.ts ├── App.css ├── main.tsx ├── App.tsx └── index.css ├── public ├── logo.png ├── cover-image-dark.png ├── cover-image-light.png └── vite.svg ├── tsconfig-build.json ├── showcase ├── assets │ ├── googlea2f4221be7d8956b.html │ ├── preview.png │ ├── no-icons-found.png │ ├── hero-image-dark.png │ ├── hero-image-light.png │ ├── under-development.png │ └── robots.txt ├── .vscode │ ├── extensions.json │ └── launch.json ├── src │ ├── env.d.ts │ ├── config.ts │ ├── styles │ │ └── globals.css │ ├── components │ │ ├── Container.astro │ │ ├── ui │ │ │ ├── loader.tsx │ │ │ ├── themeToggle.tsx │ │ │ ├── tooltip.tsx │ │ │ └── popover.tsx │ │ ├── UnderDevelopment.astro │ │ ├── mobileDocsMenu.tsx │ │ └── noIconsFound.tsx │ ├── pages │ │ ├── docs │ │ │ ├── contributing.astro │ │ │ ├── walkthrough.md │ │ │ └── license.md │ │ └── index.astro │ └── lib │ │ ├── hooks.ts │ │ └── utils.ts ├── tsconfig.json ├── .gitignore ├── components.json ├── astro.config.mjs ├── tailwind.config.mjs └── package.json ├── icons ├── bulmaui.svg ├── vercel-dark.svg ├── vercel-light.svg ├── framer-dark.svg ├── liveblocks.svg ├── npm.svg ├── framer-light.svg ├── raw │ └── .gitkeep ├── hyper2.svg ├── vagrant.svg ├── microsoft.svg ├── vuejs.svg ├── terraform.svg ├── radixui.svg ├── lokalise.svg ├── dovetail.svg ├── anthropic-basic-dark.svg ├── serverless.svg ├── shadcnui.svg ├── anthropic-basic-light.svg ├── lit.svg ├── elementui.svg ├── jamstack.svg ├── graphite.svg ├── npm-wordmark.svg ├── x-dark.svg ├── x-light.svg ├── pytorch.svg ├── zen.svg ├── haskell.svg ├── oracle.svg ├── render.svg ├── auth0.svg ├── hhvm.svg ├── kotlin.svg ├── hexo.svg ├── hotjar.svg ├── materialui.svg ├── prisma.svg ├── markdown.svg ├── backbonejs.svg ├── kibana.svg ├── cakephp.svg ├── miro.svg ├── esbuild.svg ├── webassembly.svg ├── biome.svg ├── ec2.svg ├── ansible.svg ├── facebook.svg ├── firebase.svg ├── hashnode.svg ├── html5.svg ├── upwork-basic.svg ├── youtube.svg ├── heroku.svg ├── anthropic.svg ├── claude-ai.svg ├── digitalocean.svg ├── fast-api.svg ├── gatsby.svg ├── pytorch3d.svg ├── tailwindcss.svg ├── solidity.svg ├── css3.svg ├── upwork.svg ├── k6.svg ├── gitlab.svg ├── webpack.svg ├── pwa.svg ├── faunadb.svg ├── lunacy.svg ├── django.svg ├── apple-dark.svg ├── bluesky.svg ├── git.svg ├── clerk.svg ├── remix-dark.svg ├── apple-light.svg ├── crystal.svg ├── nuxtjs.svg ├── bitbucket.svg ├── shopware.svg ├── sketch.svg ├── atlassian.svg ├── figma.svg ├── threejs-dark.svg ├── semanticui.svg ├── stream.svg ├── chakraui.svg ├── circleci.svg ├── vscode.svg ├── nextjs.svg ├── netlify2.svg ├── convex.svg ├── reactjs.svg ├── javascript.svg ├── onedrive.svg ├── tensorflow.svg ├── twitter.svg ├── ionic.svg ├── numpy.svg ├── qwik.svg ├── clickhouse.svg ├── axiom.svg ├── vk.svg ├── remix-light.svg ├── css.svg ├── supabase.svg ├── zod.svg ├── storybook.svg ├── yoga.svg ├── bootstrap4.svg ├── eslint.svg ├── visualbasic.svg ├── xamarin.svg ├── ember.svg ├── threejs-light.svg ├── vitest.svg ├── astro.svg ├── expressjs-dark.svg ├── expressjs-light.svg ├── nim.svg ├── flutter.svg ├── grafbase.svg ├── dart.svg ├── github-light.svg ├── gmail.svg ├── railway.svg ├── codeigniter.svg ├── insomnia.svg ├── jira.svg ├── sublime.svg ├── google.svg ├── bootstrap5.svg ├── lightroom.svg ├── pnpm-light.svg ├── codefresh.svg ├── messenger.svg ├── redhat.svg ├── pnpm-dark.svg ├── pinterest.svg ├── json.svg ├── spring.svg ├── sketch2.svg ├── dlang.svg ├── storyblok.svg ├── tRPC.svg ├── invision.svg ├── deno-fresh.svg ├── angular.svg ├── google-cloud.svg ├── telegram.svg ├── preact.svg ├── tor.svg ├── neovim.svg ├── vitejs.svg ├── reactrouter.svg ├── python.svg ├── indesign.svg ├── discord.svg ├── symfony-dark.svg ├── symfony-light.svg ├── c.svg ├── mongodb.svg ├── pandacss.svg ├── internet-explorer.svg ├── i18next.svg ├── vercel-dark-wordmark.svg ├── vercel-light-wordmark.svg ├── pulumi.svg ├── vivaldi.svg ├── cloudflare.svg ├── wordpress.svg ├── cloudinary.svg ├── netlify.svg ├── reddit.svg ├── chrome.svg ├── erlang.svg ├── scala.svg ├── ubuntu.svg ├── logrocket.svg ├── r.svg ├── graphql.svg ├── opera.svg ├── mastodon.svg ├── typescript.svg ├── java.svg ├── bitnami.svg ├── lua.svg ├── slack.svg ├── threads-dark.svg ├── threads-light.svg ├── notion.svg ├── stylelint.svg ├── upwork-wordmark.svg ├── appwrite.svg ├── chromium.svg ├── presto.svg └── elastic.svg ├── tsconfig.node.json ├── .github ├── workflows │ └── dependents.yml └── FUNDING.yml ├── .gitignore ├── index.html ├── .eslintrc.cjs ├── vite.config.ts ├── tsconfig.json ├── svgo.config.mjs └── LICENSE /lib/main.ts: -------------------------------------------------------------------------------- 1 | export * from "./icons"; 2 | -------------------------------------------------------------------------------- /lib/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /playground/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /public/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xandemon/developer-icons/HEAD/public/logo.png -------------------------------------------------------------------------------- /tsconfig-build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": ["lib"] 4 | } 5 | -------------------------------------------------------------------------------- /showcase/assets/googlea2f4221be7d8956b.html: -------------------------------------------------------------------------------- 1 | google-site-verification: googlea2f4221be7d8956b.html -------------------------------------------------------------------------------- /public/cover-image-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xandemon/developer-icons/HEAD/public/cover-image-dark.png -------------------------------------------------------------------------------- /public/cover-image-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xandemon/developer-icons/HEAD/public/cover-image-light.png -------------------------------------------------------------------------------- /showcase/assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xandemon/developer-icons/HEAD/showcase/assets/preview.png -------------------------------------------------------------------------------- /showcase/assets/no-icons-found.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xandemon/developer-icons/HEAD/showcase/assets/no-icons-found.png -------------------------------------------------------------------------------- /showcase/assets/hero-image-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xandemon/developer-icons/HEAD/showcase/assets/hero-image-dark.png -------------------------------------------------------------------------------- /showcase/assets/hero-image-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xandemon/developer-icons/HEAD/showcase/assets/hero-image-light.png -------------------------------------------------------------------------------- /showcase/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["astro-build.astro-vscode"], 3 | "unwantedRecommendations": [] 4 | } 5 | -------------------------------------------------------------------------------- /showcase/assets/under-development.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/xandemon/developer-icons/HEAD/showcase/assets/under-development.png -------------------------------------------------------------------------------- /showcase/assets/robots.txt: -------------------------------------------------------------------------------- 1 | 2 | User-agent: * 3 | Allow: / 4 | 5 | Sitemap: https://xandemon.github.io/developer-icons/sitemap-index.xml 6 | -------------------------------------------------------------------------------- /showcase/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | declare const __LIB_VERSION__: string; 5 | -------------------------------------------------------------------------------- /lib/constants.ts: -------------------------------------------------------------------------------- 1 | export const defaultAttributes = { 2 | xmlns: "http://www.w3.org/2000/svg", 3 | width: 48, 4 | height: 48, 5 | viewBox: "0 0 48 48", 6 | }; 7 | -------------------------------------------------------------------------------- /showcase/src/config.ts: -------------------------------------------------------------------------------- 1 | const publicBaseUrl = import.meta.env.PROD 2 | ? "/developer-icons" 3 | : "/developer-icons/showcase"; 4 | 5 | export { publicBaseUrl }; 6 | -------------------------------------------------------------------------------- /icons/bulmaui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vercel-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vercel-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/framer-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/liveblocks.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/npm.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/framer-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/raw/.gitkeep: -------------------------------------------------------------------------------- 1 | While adding new svg icons to the project, first upload them in this folder and then run the script 'optimize-svgs' to optimize the newly added svg icons and auto-move them to the icons folder in the root -------------------------------------------------------------------------------- /playground/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .card { 9 | padding: 2em; 10 | } 11 | 12 | .read-the-docs { 13 | color: #888; 14 | } 15 | -------------------------------------------------------------------------------- /icons/hyper2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vagrant.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "astro/tsconfigs/strict", 3 | "compilerOptions": { 4 | "jsx": "react-jsx", 5 | "jsxImportSource": "react", 6 | "baseUrl": ".", 7 | "paths": { 8 | "@/*": ["./src/*"] 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /icons/microsoft.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "command": "./node_modules/.bin/astro dev", 6 | "name": "Development server", 7 | "request": "launch", 8 | "type": "node-terminal" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /showcase/src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | * { 6 | scrollbar-width: thin; 7 | } 8 | 9 | .light * { 10 | scrollbar-color: #d4d4d8 #f4f4f5; 11 | } 12 | 13 | .dark * { 14 | scrollbar-color: #18181b #27272a; 15 | } -------------------------------------------------------------------------------- /icons/vuejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playground/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.tsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')!).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "skipLibCheck": true, 5 | "module": "ESNext", 6 | "moduleResolution": "bundler", 7 | "allowSyntheticDefaultImports": true, 8 | "strict": true 9 | }, 10 | "include": ["vite.config.ts"] 11 | } 12 | -------------------------------------------------------------------------------- /icons/terraform.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/components/Container.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { cn } from "@/lib/utils"; 3 | 4 | const { className } = Astro.props; 5 | --- 6 | 7 |
13 | 14 |
15 | -------------------------------------------------------------------------------- /icons/radixui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lokalise.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/dovetail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/anthropic-basic-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/serverless.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/shadcnui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/anthropic-basic-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/elementui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/pages/docs/contributing.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import DocsLayout from "@/layouts/DocsLayout.astro"; 3 | import { Content } from "../../../../CONTRIBUTING.md"; 4 | --- 5 | 6 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /.github/workflows/dependents.yml: -------------------------------------------------------------------------------- 1 | name: Dependents Action 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | schedule: 7 | - cron: "0 0 1 * *" 8 | workflow_dispatch: 9 | 10 | jobs: 11 | dependents: 12 | runs-on: ubuntu-latest 13 | permissions: 14 | id-token: write 15 | steps: 16 | - uses: gouravkhunger/dependents.info@0.1.3 17 | -------------------------------------------------------------------------------- /icons/jamstack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/graphite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/npm-wordmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/x-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/x-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pytorch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/zen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/.gitignore: -------------------------------------------------------------------------------- 1 | # build output 2 | dist/ 3 | 4 | # generated types 5 | .astro/ 6 | 7 | # dependencies 8 | node_modules/ 9 | 10 | # logs 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # environment variables 17 | .env 18 | .env.production 19 | 20 | # macOS-specific files 21 | .DS_Store 22 | 23 | # jetbrains setting folder 24 | .idea/ 25 | -------------------------------------------------------------------------------- /icons/haskell.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/oracle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/render.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/auth0.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/hhvm.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/kotlin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | 26 | #lib 27 | lib/icons/* 28 | lib/sortedData.json 29 | -------------------------------------------------------------------------------- /icons/hexo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/hotjar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Developer-Icons Playground 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /icons/materialui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/prisma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/markdown.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/backbonejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/kibana.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/cakephp.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/miro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/esbuild.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/webassembly.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/biome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ec2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/scripts/sortData.ts: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import path from "path"; 3 | import { iconsData } from "../iconsData"; 4 | import { fileURLToPath } from "url"; 5 | 6 | const __filename = fileURLToPath(import.meta.url); 7 | const __dirname = path.dirname(__filename); 8 | 9 | const sortedData = iconsData.sort((a, b) => 10 | a.name.toLowerCase().localeCompare(b.name.toLowerCase()) 11 | ); 12 | fs.writeFileSync( 13 | path.join(__dirname, "../sortedData.json"), 14 | JSON.stringify(sortedData) 15 | ); 16 | -------------------------------------------------------------------------------- /icons/ansible.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/lib/hooks.ts: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const useDebounce = (value: T, timeout = 500) => { 4 | const [buffer, setBuffer] = React.useState(); 5 | const timeoutHandler = React.useRef(); 6 | 7 | React.useEffect(() => { 8 | timeoutHandler.current = setTimeout(() => { 9 | setBuffer(value); 10 | }, timeout); 11 | return () => clearTimeout(timeoutHandler.current); 12 | }, [value, timeout]); 13 | return buffer ?? ""; 14 | }; 15 | -------------------------------------------------------------------------------- /icons/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/firebase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/hashnode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/html5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/upwork-basic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/youtube.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/heroku.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:@typescript-eslint/recommended', 7 | 'plugin:react-hooks/recommended', 8 | ], 9 | ignorePatterns: ['dist', '.eslintrc.cjs'], 10 | parser: '@typescript-eslint/parser', 11 | plugins: ['react-refresh'], 12 | rules: { 13 | 'react-refresh/only-export-components': [ 14 | 'warn', 15 | { allowConstantExport: true }, 16 | ], 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /icons/anthropic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/claude-ai.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | 8 | export function downloader(url: string, filename: string) { 9 | const downloadEl = document.createElement("a"); 10 | downloadEl.href = url; 11 | downloadEl.download = filename; 12 | document.body.appendChild(downloadEl); 13 | downloadEl.click(); 14 | document.body.removeChild(downloadEl); 15 | } 16 | -------------------------------------------------------------------------------- /showcase/components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.mjs", 8 | "css": "./src/styles/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": false, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /icons/digitalocean.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/fast-api.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/gatsby.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pytorch3d.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tailwindcss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/solidity.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/css3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/upwork.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/k6.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/gitlab.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/webpack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pwa.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/faunadb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lunacy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/django.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/apple-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bluesky.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/git.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/clerk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/remix-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/apple-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/crystal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/nuxtjs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/icon.ts: -------------------------------------------------------------------------------- 1 | import { SVGProps, createElement } from "react"; 2 | import { mergeClassNames } from "./utils"; 3 | import { defaultAttributes } from "./constants"; 4 | 5 | export interface DeveloperIconProps extends Partial> { 6 | size?: number; 7 | } 8 | 9 | export const Icon = ({ 10 | size = 80, 11 | className, 12 | color, 13 | ...rest 14 | }: DeveloperIconProps) => { 15 | const svgString = createElement("svg", { 16 | ...defaultAttributes, 17 | stroke: color, 18 | className: mergeClassNames("developer-icons", className), 19 | ...rest, 20 | width: size, 21 | height: size, 22 | }); 23 | return svgString; 24 | }; 25 | -------------------------------------------------------------------------------- /icons/bitbucket.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/shopware.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sketch.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/pages/index.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import Layout from "../layouts/Layout.astro"; 3 | import FeatureSection from "@/components/FeatureSection.astro"; 4 | import HeroSection from "@/components/HeroSection.astro"; 5 | import { InstallCmd } from "@/components/ui/installCmd"; 6 | --- 7 | 8 | 9 |
12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 |
21 | -------------------------------------------------------------------------------- /icons/atlassian.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import * as DI from "./main"; 2 | 3 | export const capitalizeFirstletter = (str: string, invert?: boolean) => 4 | invert 5 | ? `${str[0].toLowerCase()}${str.slice(1)}` 6 | : `${str[0].toUpperCase()}${str.slice(1)}`; 7 | 8 | export const mergeClassNames = (defaultClass: string, className?: string) => 9 | `${defaultClass} ${className ?? ""}`; 10 | 11 | export const generateIconCompName = (initialName: string) => { 12 | const iconName = initialName 13 | .replace(/#/g, "-sharp") 14 | .replace(/\+/g, "-plus") 15 | .split(/[-. ]+/) 16 | .map((item) => capitalizeFirstletter(item)) 17 | .join(""); 18 | return iconName as keyof typeof DI; 19 | }; 20 | -------------------------------------------------------------------------------- /icons/figma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/threejs-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/semanticui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/stream.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import dts from "vite-plugin-dts"; 3 | import { libInjectCss } from "vite-plugin-lib-inject-css"; 4 | import react from "@vitejs/plugin-react"; 5 | import { resolve } from "path"; 6 | 7 | // https://vitejs.dev/config/ 8 | export default defineConfig({ 9 | plugins: [react(), libInjectCss(), dts({ include: ["lib"] })], 10 | build: { 11 | copyPublicDir: false, 12 | lib: { 13 | entry: resolve(__dirname, "lib/main.ts"), 14 | formats: ["es"], 15 | }, 16 | rollupOptions: { 17 | external: ["react", "react/jsx-runtime"], 18 | output: { 19 | entryFileNames: "[name].js", 20 | }, 21 | }, 22 | }, 23 | }); 24 | -------------------------------------------------------------------------------- /icons/chakraui.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/circleci.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vscode.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/nextjs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/netlify2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/components/ui/loader.tsx: -------------------------------------------------------------------------------- 1 | import { cn } from "@/lib/utils"; 2 | import type { ReactNode } from "react"; 3 | 4 | export const Loader = ({ 5 | loading, 6 | children, 7 | className = "", 8 | style, 9 | }: { 10 | loading: boolean; 11 | children: ReactNode; 12 | className?: string; 13 | style?: React.CSSProperties; 14 | }) => { 15 | if (loading) { 16 | return ( 17 |
24 | ); 25 | } else { 26 | return children; 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /icons/convex.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/reactjs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true, 22 | "noImplicitAny": false 23 | }, 24 | "include": ["playground"], 25 | "references": [{ "path": "./tsconfig.node.json" }] 26 | } 27 | -------------------------------------------------------------------------------- /icons/javascript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/onedrive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tensorflow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ionic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/numpy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/qwik.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/astro.config.mjs: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "astro/config"; 2 | import react from "@astrojs/react"; 3 | import tailwind from "@astrojs/tailwind"; 4 | import partytown from "@astrojs/partytown"; 5 | import sitemap from "@astrojs/sitemap"; 6 | import rootPkg from '../package.json' 7 | 8 | // https://astro.build/config 9 | export default defineConfig({ 10 | site: "https://xandemon.github.io", 11 | base: "/developer-icons/showcase", 12 | vite:{ 13 | define:{ 14 | '__LIB_VERSION__': JSON.stringify(rootPkg.version) 15 | } 16 | }, 17 | trailingSlash: "never", 18 | publicDir: "./assets", 19 | integrations: [react(), tailwind({ 20 | applyBaseStyles: false, 21 | }), partytown({ 22 | config: { 23 | forward: ['dataLayer.push'] 24 | } 25 | }), sitemap()], 26 | }); -------------------------------------------------------------------------------- /icons/clickhouse.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/axiom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vk.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/remix-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/css.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/supabase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/zod.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/storybook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/yoga.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/components/UnderDevelopment.astro: -------------------------------------------------------------------------------- 1 | --- 2 | import { Button } from "./ui/button"; 3 | import { publicBaseUrl } from "@/config"; 4 | --- 5 | 6 |
7 | Page Under Development 12 |
13 |

Working on it.

14 |

15 | This page is currently under development. 16 |

17 | 23 |
24 |
25 | -------------------------------------------------------------------------------- /icons/bootstrap4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/eslint.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/visualbasic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/xamarin.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ember.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/threejs-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vitest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [xandemon] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry 12 | polar: # Replace with a single Polar username 13 | buy_me_a_coffee: # Replace with a single Buy Me a Coffee username 14 | thanks_dev: # Replace with a single thanks.dev username 15 | custom: ['https://paypal.me/sandeshkatwal'] 16 | -------------------------------------------------------------------------------- /icons/astro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/expressjs-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/expressjs-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/nim.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/components/mobileDocsMenu.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | DropdownMenu, 3 | DropdownMenuTrigger, 4 | DropdownMenuContent, 5 | DropdownMenuItem, 6 | } from "@/components/ui/dropdown-menu"; 7 | import { Menu } from "lucide-react"; 8 | 9 | export const MobileDocsMenu = ({ 10 | menuList, 11 | }: { 12 | menuList: Array>; 13 | }) => { 14 | return ( 15 | 16 | 17 | 18 | 19 | 20 | {menuList.map((doc, index) => ( 21 | 22 | 23 | {doc.frontmatter.title} 24 | 25 | 26 | ))} 27 | 28 | 29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /icons/flutter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/grafbase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/dart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/github-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/gmail.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/railway.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/codeigniter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/insomnia.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/jira.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sublime.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bootstrap5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lightroom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pnpm-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/codefresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/messenger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/redhat.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pnpm-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /svgo.config.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: [ 3 | { 4 | name: "preset-default", 5 | params: { 6 | overrides: { 7 | // disable a default plugin 8 | removeViewBox: false, 9 | }, 10 | }, 11 | }, 12 | "removeDimensions", 13 | "convertStyleToAttrs", 14 | { 15 | name: "removeClass", 16 | description: "Remove class attributes", 17 | fn: () => { 18 | return { 19 | element: { 20 | enter: (node) => { 21 | delete node.attributes.class; 22 | }, 23 | }, 24 | }; 25 | }, 26 | }, 27 | { 28 | name: "addKeyAttr", 29 | description: "Add key attribute", 30 | fn: () => { 31 | return { 32 | element: { 33 | enter: (node) => { 34 | node.attributes.key = Math.random().toString(36).substring(2, 9); 35 | }, 36 | }, 37 | }; 38 | }, 39 | }, 40 | ], 41 | }; 42 | -------------------------------------------------------------------------------- /icons/pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/json.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/spring.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/sketch2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/components/ui/themeToggle.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { Button } from "./button"; 3 | import { Moon, Sun } from "lucide-react"; 4 | 5 | export const ThemeToggle = () => { 6 | const [theme, setTheme] = useState<"light" | "dark">(); 7 | 8 | const toggleTheme = () => { 9 | const newTheme = theme === "dark" ? "light" : "dark"; 10 | setTheme(newTheme); 11 | document.documentElement.classList.toggle("dark"); 12 | localStorage.setItem("theme", newTheme); 13 | }; 14 | 15 | useEffect(() => { 16 | const savedTheme = localStorage.getItem("theme"); 17 | setTheme(savedTheme as "light" | "dark"); 18 | }, []); 19 | 20 | return ( 21 | 33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /icons/dlang.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/storyblok.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tRPC.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lib/scripts/build.ts: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import path from "path"; 3 | import { fileURLToPath } from "url"; 4 | 5 | import { generateIconCompName } from "../utils"; 6 | import { createDeveloperIcon } from "../createDeveloperIcon"; 7 | import { iconsData } from "../iconsData"; 8 | 9 | const __filename = fileURLToPath(import.meta.url); 10 | const __dirname = path.dirname(__filename); 11 | const svgDir = path.join(__dirname, "../../"); 12 | 13 | let exportStatement = ""; 14 | 15 | iconsData.forEach((icon) => { 16 | //create exportable icon components 17 | const iconContent = fs.readFileSync(path.join(svgDir, icon.path), "utf-8"); 18 | const iconName = generateIconCompName(icon.name); 19 | 20 | const component = createDeveloperIcon( 21 | iconName, 22 | iconContent, 23 | path.join(svgDir, icon.path) 24 | ); 25 | fs.writeFileSync( 26 | path.join(__dirname, "../icons", `${iconName}.tsx`), 27 | component 28 | ); 29 | 30 | exportStatement += `export * from './${iconName}.tsx';`; 31 | }); 32 | fs.writeFileSync(path.join(__dirname, "../icons/index.ts"), exportStatement); 33 | -------------------------------------------------------------------------------- /icons/invision.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/deno-fresh.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/angular.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/google-cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/telegram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Sandesh Katwal aka xandemon 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /icons/preact.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/tor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/neovim.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vitejs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/reactrouter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/python.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/indesign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/discord.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/symfony-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/symfony-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/tailwind.config.mjs: -------------------------------------------------------------------------------- 1 | import defaultTheme from "tailwindcss/defaultTheme"; 2 | /** @type {import('tailwindcss').Config} */ 3 | 4 | export default { 5 | darkMode: 'selector', 6 | content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], 7 | prefix: "", 8 | theme: { 9 | container: { 10 | center: true, 11 | padding: "2rem", 12 | screens:{} 13 | }, 14 | extend: { 15 | fontFamily: { 16 | sans: ["Noto Sans Variable", ...defaultTheme.fontFamily.sans], 17 | }, 18 | keyframes: { 19 | "accordion-down": { 20 | from: { height: "0" }, 21 | to: { height: "var(--radix-accordion-content-height)" }, 22 | }, 23 | "accordion-up": { 24 | from: { height: "var(--radix-accordion-content-height)" }, 25 | to: { height: "0" }, 26 | }, 27 | }, 28 | animation: { 29 | "accordion-down": "accordion-down 0.2s ease-out", 30 | "accordion-up": "accordion-up 0.2s ease-out", 31 | }, 32 | gridTemplateColumns: { 33 | "auto-fit": "repeat(auto-fit, minmax(230px, 1fr))", 34 | }, 35 | }, 36 | }, 37 | plugins: [require("tailwindcss-animate")], 38 | }; 39 | -------------------------------------------------------------------------------- /playground/App.tsx: -------------------------------------------------------------------------------- 1 | import { Bluesky, PnpmLight, PnpmDark, PnpmDarkWordmark, PnpmLightWordmark } from "../dist/main"; 2 | import "./App.css"; 3 | 4 | function App() { 5 | return ( 6 | <> 7 |
8 | 9 | 10 | 11 |
12 |
13 | 14 | 15 |
16 |

Developer-Icons Playground

17 |
18 | 19 | 20 | 21 |

22 | Edit playground/App.tsx and save to see changes 23 |

24 |
25 |

26 | Test around with developer-icons components here while developing 27 | them 28 |

29 | 30 | ); 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /icons/c.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/mongodb.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pandacss.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/pages/docs/walkthrough.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: ../../layouts/DocsLayout.astro 3 | title: Walkthrough 4 | order: 3 5 | --- 6 | 7 | # Project Walkthrough 8 | 9 | Welcome to the **Developer Icons** project! This document provides an overview of the project structure and helps you navigate the repository. 10 | 11 | ## 📁 Project Structure 12 | 13 | #### Root Directory 14 | 15 | The root of the repository is the npm package for Developer Icons. The main source code resides here. 16 | 17 | #### `lib` Directory 18 | 19 | The `lib` folder contains the main source files for the npm package. This is where the icon components are developed and maintained. 20 | 21 | #### `showcase` Directory 22 | 23 | The `showcase` subfolder hosts the website made with Astro. It provides information about the package, preview of all the available icons and usage guides and examples. 24 | 25 | #### `playground` Directory 26 | 27 | The `playground` folder contains the source of root Vite React project used for testing the icon library. This is where you can experiment with icons as they are being developed. 28 | 29 | #### `icons` Directory 30 | 31 | The `icons` folder stores the raw and processed SVG files. These SVGs are used to create the icon components that make up the library. 32 | -------------------------------------------------------------------------------- /showcase/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "type": "module", 4 | "version": "0.0.1", 5 | "scripts": { 6 | "dev": "astro dev", 7 | "start": "astro dev", 8 | "build": "astro check && astro build", 9 | "preview": "astro preview", 10 | "astro": "astro" 11 | }, 12 | "dependencies": { 13 | "@astrojs/check": "^0.6.0", 14 | "@astrojs/partytown": "^2.1.2", 15 | "@astrojs/react": "^3.3.4", 16 | "@astrojs/sitemap": "^3.2.1", 17 | "@astrojs/tailwind": "^5.1.0", 18 | "@fontsource-variable/noto-sans": "^5.0.5", 19 | "@radix-ui/react-alert-dialog": "^1.1.2", 20 | "@radix-ui/react-dropdown-menu": "^2.1.5", 21 | "@radix-ui/react-popover": "^1.1.2", 22 | "@radix-ui/react-slot": "^1.1.0", 23 | "@radix-ui/react-tooltip": "^1.1.4", 24 | "@types/react": "^18.3.2", 25 | "@types/react-dom": "^18.3.0", 26 | "astro": "^5.5.6", 27 | "class-variance-authority": "^0.7.0", 28 | "clsx": "^2.1.1", 29 | "developer-icons": "^6.0.4", 30 | "lucide-react": "^0.378.0", 31 | "moment": "^2.30.1", 32 | "react": "^18.3.1", 33 | "react-dom": "^18.3.1", 34 | "tailwind-merge": "^2.3.0", 35 | "tailwindcss": "^3.4.3", 36 | "tailwindcss-animate": "^1.0.7", 37 | "typescript": "^5.4.5" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /icons/internet-explorer.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/i18next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/pages/docs/license.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: ../../layouts/DocsLayout.astro 3 | title: License 4 | order: 5 5 | --- 6 | 7 | # License 8 | 9 | ``` 10 | MIT License 11 | 12 | © 2024 Sandesh Katwal aka xandemon 13 | 14 | Permission is hereby granted, free of charge, to any person obtaining a copy 15 | of this software and associated documentation files (the "Software"), to deal 16 | in the Software without restriction, including without limitation the rights 17 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 18 | copies of the Software, and to permit persons to whom the Software is 19 | furnished to do so, subject to the following conditions: 20 | 21 | The above copyright notice and this permission notice shall be included in all 22 | copies or substantial portions of the Software. 23 | 24 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 25 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 26 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 27 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 28 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 29 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 30 | SOFTWARE. 31 | ``` 32 | -------------------------------------------------------------------------------- /icons/vercel-dark-wordmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vercel-light-wordmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/pulumi.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/vivaldi.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/cloudflare.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/wordpress.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/cloudinary.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/components/ui/tooltip.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"; 3 | 4 | import { cn } from "@/lib/utils"; 5 | 6 | const TooltipProvider = TooltipPrimitive.Provider; 7 | 8 | const Tooltip = TooltipPrimitive.Root; 9 | 10 | const TooltipTrigger = TooltipPrimitive.Trigger; 11 | 12 | const TooltipContent = React.forwardRef< 13 | React.ElementRef, 14 | React.ComponentPropsWithoutRef 15 | >(({ className, sideOffset = 4, ...props }, ref) => ( 16 | 25 | )); 26 | TooltipContent.displayName = TooltipPrimitive.Content.displayName; 27 | 28 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; 29 | -------------------------------------------------------------------------------- /icons/netlify.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/reddit.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/chrome.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/erlang.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/scala.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/ubuntu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/logrocket.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/r.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/components/noIconsFound.tsx: -------------------------------------------------------------------------------- 1 | import { publicBaseUrl } from "@/config"; 2 | 3 | const NoIconsFound = () => { 4 | return ( 5 |
6 | No Icons Found 11 |

12 | No Icons Found 13 |

14 |

15 | Looks like we don't have the icons you're looking for. You can create an{" "} 16 | 22 | issue 23 | {" "} 24 | to notify the developers or{" "} 25 | 31 | contribute 32 | {" "} 33 | one yourself. 34 |

35 |
36 | ); 37 | }; 38 | 39 | export default NoIconsFound; 40 | -------------------------------------------------------------------------------- /icons/graphql.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/opera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /showcase/src/components/ui/popover.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as PopoverPrimitive from "@radix-ui/react-popover"; 3 | 4 | import { cn } from "@/lib/utils"; 5 | 6 | const Popover = PopoverPrimitive.Root; 7 | 8 | const PopoverTrigger = PopoverPrimitive.Trigger; 9 | 10 | const PopoverContent = React.forwardRef< 11 | React.ElementRef, 12 | React.ComponentPropsWithoutRef 13 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( 14 | 15 | 25 | 26 | )); 27 | PopoverContent.displayName = PopoverPrimitive.Content.displayName; 28 | 29 | export { Popover, PopoverTrigger, PopoverContent }; 30 | -------------------------------------------------------------------------------- /icons/mastodon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/typescript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/java.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/bitnami.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/lua.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/slack.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playground/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 3 | line-height: 1.5; 4 | font-weight: 400; 5 | 6 | color-scheme: light dark; 7 | color: rgba(255, 255, 255, 0.87); 8 | background-color: #242424; 9 | 10 | font-synthesis: none; 11 | text-rendering: optimizeLegibility; 12 | -webkit-font-smoothing: antialiased; 13 | -moz-osx-font-smoothing: grayscale; 14 | } 15 | 16 | a { 17 | font-weight: 500; 18 | color: #646cff; 19 | text-decoration: inherit; 20 | } 21 | a:hover { 22 | color: #535bf2; 23 | } 24 | 25 | body { 26 | margin: 0; 27 | display: flex; 28 | place-items: center; 29 | min-width: 320px; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /icons/threads-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/threads-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/notion.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/stylelint.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/upwork-wordmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/appwrite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/chromium.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/presto.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /icons/elastic.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------