diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 00000000..982b2fa1
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,14 @@
+module.exports = {
+ env: {
+ es2021: true,
+ node: true,
+ },
+ extends: ['eslint:recommended', 'plugin:prettier/recommended'],
+ parserOptions: {
+ ecmaVersion: 13,
+ sourceType: 'module',
+ },
+ rules: {
+ 'prettier/prettier': ['error'],
+ },
+};
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index 9b762984..dde60db8 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -13,21 +13,22 @@ Before reporting an issue, please search to see if someone has filed a similar i
## Prerequisites
-- Version:
-- Are you running from source/main:
-- Are you using a released build:
-- Operating system:
+* Version:
+* Are you running from source/main:
+* Are you using a released build:
+* Operating system:
+* Bits:
## Step to reproduce
-_(Type here)_
+*(Type here)*
### Actual behavior
## Any message or error
-_(Type here)_
+*(Type here)*
## Additional info or screenshots
-- Screenshots
+* Screenshots
diff --git a/.github/ISSUE_TEMPLATE/icon_request.md b/.github/ISSUE_TEMPLATE/icon_request.md
index c9827fd6..b8dfcb8b 100644
--- a/.github/ISSUE_TEMPLATE/icon_request.md
+++ b/.github/ISSUE_TEMPLATE/icon_request.md
@@ -13,6 +13,6 @@ Before creating an icon request, please search to see if someone has requested t
## Icon Request
-- Icon name:
-- Use case:
-- Screenshots of similar icons:
+* Icon name:
+* Use case:
+* Screenshots of similar icons:
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
deleted file mode 100644
index 5e4e226f..00000000
--- a/.github/actions/setup/action.yml
+++ /dev/null
@@ -1,36 +0,0 @@
-name: Setup
-description: Setup the environment for the project
-
-inputs:
- node-registry:
- description: Node.js package registry to set up for auth
- required: false
-
-runs:
- using: composite
- steps:
- - name: Install Node.js
- uses: actions/setup-node@v4
- with:
- node-version: 22
- registry-url: ${{ inputs.node-registry }}
-
- - name: Install pnpm
- uses: pnpm/action-setup@v4
-
- - name: Get pnpm store directory
- id: pnpm-cache-dir
- shell: bash
- run: echo "dir=$(pnpm store path)" >> $GITHUB_OUTPUT
-
- - name: Setup pnpm cache
- uses: actions/cache@v4
- with:
- path: ${{ steps.pnpm-cache-dir.outputs.dir }}
- key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
- restore-keys: |
- ${{ runner.os }}-pnpm-store-
-
- - name: Install dependencies
- shell: bash
- run: pnpm install
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
index 6b7174ac..74b2230b 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -9,19 +9,23 @@ jobs:
build:
name: Build
runs-on: ubuntu-latest
- # Skip job on forks
- if: github.repository_owner == 'iconoir-icons'
steps:
- - name: Checkout repository
- uses: actions/checkout@v4
-
- - name: Setup
- uses: ./.github/actions/setup
-
- - name: Build CSS
- run: pnpm run build css
-
- - name: Commit changes
- uses: stefanzweifel/git-auto-commit-action@v6
- with:
- commit_message: Update build artifacts
+ - uses: actions/checkout@v2
+ - uses: actions/cache@v2
+ with:
+ path: ~/.pnpm-store
+ key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-
+ - uses: actions/setup-node@v2
+ with:
+ node-version: '16'
+ registry-url: 'https://registry.npmjs.org'
+ - uses: pnpm/action-setup@v2.1.0
+ with:
+ version: 7.8.0
+ run_install: true
+ - run: pnpm run build
+ - uses: stefanzweifel/git-auto-commit-action@v4
+ with:
+ commit_message: Update build artifacts
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
deleted file mode 100644
index 1e65815a..00000000
--- a/.github/workflows/ci.yaml
+++ /dev/null
@@ -1,28 +0,0 @@
-name: CI
-
-on:
- pull_request:
- branches:
- - main
-
-concurrency:
- group: ${{ github.workflow }}-${{ github.ref }}
- cancel-in-progress: true
-
-jobs:
- lint:
- name: Lint
- runs-on: ubuntu-latest
- steps:
- - name: Get changed files
- id: changed-files
- uses: tj-actions/changed-files@v46
-
- - name: Checkout repository
- uses: actions/checkout@v4
-
- - name: Setup
- uses: ./.github/actions/setup
-
- - name: Run Linter
- run: pnpm exec eslint ${{ steps.changed-files.outputs.all_changed_files }}
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index ac08a105..0e9a4d1c 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -9,56 +9,48 @@ jobs:
release:
name: Release
runs-on: ubuntu-latest
- permissions:
- contents: write
- id-token: write
steps:
- - name: Checkout repository
- uses: actions/checkout@v4
+ - uses: actions/checkout@v2
with:
- # We have to checkout main or PNPM fails. Tag should be on main anyway.
- ref: main
-
- - name: Setup
- uses: ./.github/actions/setup
+ ref: main # We have to checkout main or PNPM fails. Tag should be on main anyway.
+ - uses: actions/cache@v2
with:
- node-registry: https://registry.npmjs.org
-
- - name: Generate changelog file
- uses: rhysd/changelog-from-release/action@v3
+ path: ~/.pnpm-store
+ key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-
+ - uses: actions/setup-node@v2
+ with:
+ node-version: '16'
+ registry-url: 'https://registry.npmjs.org'
+ - uses: pnpm/action-setup@v2.1.0
+ with:
+ version: 7.8.0
+ run_install: true
+ - uses: rhysd/changelog-from-release/action@v2
with:
- github_token: ${{ secrets.GITHUB_TOKEN }}
file: packages/iconoir-flutter/CHANGELOG.md
+ github_token: ${{ secrets.GITHUB_TOKEN }}
commit: false
- args: -d=false
-
- - name: Build
- run: pnpm run build
-
- - name: Prepare packages
- run: pnpm run prepublish-all
+ - run: pnpm run build
+ - run: pnpm run prepublish-all
env:
TAG_NAME: ${{ github.ref_name }}
-
- - name: Commit release
- uses: stefanzweifel/git-auto-commit-action@v6
+ - uses: stefanzweifel/git-auto-commit-action@v4
with:
commit_message: Release Version ${{ github.ref_name }}
branch: main
-
- - name: Update tag
- run: |
- git -c user.email="actions@github.com" -c user.name="GitHub Actions" tag -fa ${{ github.ref_name }} -m "${{ github.ref_name }}"
- git push -f origin ${{ github.ref_name }}
-
- - name: Publish packages
- run: pnpm -r publish --access public
+ - run: git -c user.email="actions@github.com" -c user.name="GitHub Actions" tag -fa ${{ github.ref_name }} -m "${{ github.ref_name }}"
+ - run: git push -f origin ${{ github.ref_name }}
+ - run: npm publish --access public
+ continue-on-error: true
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- NPM_CONFIG_PROVENANCE: true
-
- - name: Publish Flutter
- uses: k-paxian/dart-package-publisher@v1.6
- with:
- credentialJson: ${{ secrets.PUB_CREDENTIAL_JSON }}
- relativePath: ./packages/iconoir-flutter
+ - run: pnpm -r publish --filter './packages/**' --access public
+ continue-on-error: true
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+ # - uses: sakebook/actions-flutter-pub-publisher@v1.4.0
+ # with:
+ # credential: ${{ secrets.PUB_CREDENTIAL_JSON }}
+ # package_directory: ./packages/iconoir-flutter
diff --git a/.github/workflows/website.yaml b/.github/workflows/website.yaml
index 83178de5..7606f243 100644
--- a/.github/workflows/website.yaml
+++ b/.github/workflows/website.yaml
@@ -1,59 +1,62 @@
name: Website
-on:
- workflow_dispatch:
- workflow_run:
- workflows:
- - Release
- types:
- - completed
-
permissions:
- actions: read
contents: read
pages: write
id-token: write
concurrency:
- group: ${{ github.workflow }}
+ group: pages
cancel-in-progress: true
+on:
+ workflow_dispatch: {}
+ push:
+ tags:
+ - 'v*'
+
jobs:
build:
- name: Build
runs-on: ubuntu-latest
steps:
- - name: Checkout repository
- uses: actions/checkout@v4
-
- - name: Setup
- uses: ./.github/actions/setup
-
- - name: Build
- run: pnpm run build react
-
- - name: Build website
- run: pnpm run build
- working-directory: iconoir.com
- env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
- - name: Setup GitHub Pages
- uses: actions/configure-pages@v5
-
- - name: Upload artifact
- uses: actions/upload-pages-artifact@v3
+ - uses: actions/checkout@v2
with:
- path: ./iconoir.com/out
-
+ ref: main # We have to checkout main or PNPM fails. Tag should be on main anyway.
+ - uses: actions/cache@v2
+ with:
+ path: ~/.pnpm-store
+ key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+ restore-keys: |
+ ${{ runner.os }}-
+ - uses: actions/setup-node@v2
+ with:
+ node-version: '16'
+ registry-url: 'https://registry.npmjs.org'
+ - uses: pnpm/action-setup@v2.1.0
+ with:
+ version: 7.8.0
+ run_install: true
+ - name: Build Packages
+ run: pnpm run dist
+ - name: Build
+ run: ./node_modules/.bin/next build
+ working-directory: iconoir.com
+ - name: Export
+ run: ./node_modules/.bin/next export
+ working-directory: iconoir.com
+ - name: Setup Pages
+ uses: actions/configure-pages@v1
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v1
+ with:
+ path: './iconoir.com/out'
deploy:
- name: Deploy
- needs: build
- runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ needs: build
steps:
- name: Deploy to GitHub Pages
id: deployment
- uses: actions/deploy-pages@v4
+ uses: actions/deploy-pages@v1
diff --git a/.gitignore b/.gitignore
index 2c60c589..b9470778 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,2 @@
-.DS_Store
-
node_modules/
dist/
-
-packages/iconoir-flutter/lib/
-
-packages/iconoir-vue/src/*
-!packages/iconoir-vue/src/IconoirProvider.vue
-!packages/iconoir-vue/src/providerKey.ts
diff --git a/.node-version b/.node-version
deleted file mode 100644
index 2bd5a0a9..00000000
--- a/.node-version
+++ /dev/null
@@ -1 +0,0 @@
-22
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000..319e41e6
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+strict-peer-dependencies=false
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..544138be
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+ "singleQuote": true
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 940260d8..00000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "recommendations": ["dbaeumer.vscode-eslint"]
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 9f2f4482..00000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
- // Disable the default formatter, use eslint instead
- "prettier.enable": false,
- "editor.formatOnSave": false,
-
- // Auto fix
- "editor.codeActionsOnSave": {
- "source.fixAll.eslint": "explicit",
- "source.organizeImports": "never"
- },
-
- // Silent the stylistic rules in you IDE, but still auto fix them
- "eslint.rules.customizations": [
- { "rule": "style/*", "severity": "off", "fixable": true },
- { "rule": "format/*", "severity": "off", "fixable": true },
- { "rule": "*-indent", "severity": "off", "fixable": true },
- { "rule": "*-spacing", "severity": "off", "fixable": true },
- { "rule": "*-spaces", "severity": "off", "fixable": true },
- { "rule": "*-order", "severity": "off", "fixable": true },
- { "rule": "*-dangle", "severity": "off", "fixable": true },
- { "rule": "*-newline", "severity": "off", "fixable": true },
- { "rule": "*quotes", "severity": "off", "fixable": true },
- { "rule": "*semi", "severity": "off", "fixable": true }
- ],
-
- // Enable eslint for all supported languages
- "eslint.validate": [
- "javascript",
- "javascriptreact",
- "typescript",
- "typescriptreact",
- "vue",
- "html",
- "markdown",
- "json",
- "json5",
- "jsonc",
- "yaml",
- "toml",
- "xml",
- "gql",
- "graphql",
- "astro",
- "svelte",
- "css",
- "less",
- "scss",
- "pcss",
- "postcss"
- ]
-}
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 19941254..88ec62b4 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
Examples of behavior that contributes to a positive environment for our
community include:
-- Demonstrating empathy and kindness toward other people
-- Being respectful of differing opinions, viewpoints, and experiences
-- Giving and gracefully accepting constructive feedback
-- Accepting responsibility and apologizing to those affected by our mistakes,
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
and learning from the experience
-- Focusing on what is best not just for us as individuals, but for the
+* Focusing on what is best not just for us as individuals, but for the
overall community
Examples of unacceptable behavior include:
-- The use of sexualized language or imagery, and sexual attention or
+* The use of sexualized language or imagery, and sexual attention or
advances of any kind
-- Trolling, insulting or derogatory comments, and personal or political attacks
-- Public or private harassment
-- Publishing others' private information, such as a physical or email
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
address, without their explicit permission
-- Other conduct which could reasonably be considered inappropriate in a
+* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
### 4. Permanent Ban
**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior, harassment of an
+standards, including sustained inappropriate behavior, harassment of an
individual, or aggression toward or disparagement of classes of individuals.
**Consequence**: A permanent ban from any sort of public interaction within
@@ -118,11 +118,11 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 2.0, available at
[https://www.contributor-covenant.org/version/2/0/code_of_conduct.html][v2.0].
-Community Impact Guidelines were inspired by
+Community Impact Guidelines were inspired by
[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
For answers to common questions about this code of conduct, see the FAQ at
-[https://www.contributor-covenant.org/faq][FAQ]. Translations are available
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available
at [https://www.contributor-covenant.org/translations][translations].
[homepage]: https://www.contributor-covenant.org
diff --git a/.github/FUNDING.yml b/FUNDING.yml
similarity index 100%
rename from .github/FUNDING.yml
rename to FUNDING.yml
diff --git a/NAMING_CONVENTION.md b/NAMING_CONVENTION.md
deleted file mode 100644
index a4e2a320..00000000
--- a/NAMING_CONVENTION.md
+++ /dev/null
@@ -1,74 +0,0 @@
-# Naming Convention
-
-## Hierarchy
-
-The foundation of the naming convention in Iconoir is:
-
-```
-[Object]-[Modifier]-[Container]
-```
-
-### [Object]
-
-Contains one or more objects.
-
-### [Modifier]
-
-It's often an additional and unique element added as a secondary object (`-minus`, `-plus`, `-warning`).
-
-### [Container]
-
-A shape used as a container for the object (`-square`, `-circle`).
-If a shape is directly part of an object, it's not considered a container.
-
-\* You could notice a difference between icons such as
-`user-minus` and `minus-square`. The second one looks different
-because in this case the minus symbol is an _[Object]_, followed
-by the _[Container]_.
-
-## Styles
-
-An optional rule is regarding icons style. Iconoir is actually offering Regular and Solid icons. With the latter, icons names end with `-solid`. An example here:
-
-- Regular: `check-circle`
-- Solid: `check-circle-solid`
-
-## Object-Oriented Naming
-
-Exceptions apart, icons follow an object-oriented naming and
-should not embed actions in their names.
-
-Examples:
-
-- `user-minus` is correct.
-- `remove-user` would be wrong.
-
-## Physical Actions
-
-Icons that represent a physical action or movement
-can embed that action in their name.
-
-Examples:
-
-- `walking`, `running`, `vehicle-fast`, `crane-lifting` are correct.
-
-## Most-Used Modifiers and Shapes
-
-### Modifiers
-
-`-plus`, `-minus`, `-warning`, `-check`, `-xmark`, `-tag`,
-`-ban`, `-slash`
-
-- `-plus-in` and `minus-in`: Differently from `-plus` and `-minus`, these are used when the icon
- has a bigger plus or minus icon in the center or inside the main object.
-- `-no-access`: It's regularly used when the icon has a restrict
- symbol in a corner.
-
-### Shapes
-
-`-square`, `-circle`
-
-## Exceptions
-
-If you spot an icon that is not following any of the rules,
-please open a [new issue](https://github.com/iconoir-icons/iconoir/issues/new/choose) on GitHub.
diff --git a/README.md b/README.md
index 66dd2b33..113f1109 100644
--- a/README.md
+++ b/README.md
@@ -1,70 +1,69 @@
-# Iconoir
+
+
+
+ Iconoir is an open-source library with 1000+ unique SVG icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters.
+
-## What is Iconoir?
+
-Iconoir is an open-source library with 1600+ unique SVG icons, designed on a 24x24 pixels grid.
-
-Browse at iconoir.com → '
-}>;
-
-export const IconoirContext = React.createContext({});
-
-export interface IconoirProviderProps {
- iconProps?: Partial<${
- native ? `Omit` : 'React.SVGProps'
- }>;
- children: React.ReactNode;
-}
-
-export function IconoirProvider({ iconProps, children }: IconoirProviderProps) {
- return (
-
- ${svg}
-
- `;
-}
-
-export default template;
diff --git a/bin/build/worker.js b/bin/build/worker.js
deleted file mode 100644
index a9fd8782..00000000
--- a/bin/build/worker.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default async ({ targetName, config, targetConfig }) => {
- const { default: task } = await import(
- `./targets/${targetConfig.target || targetName}/index.js`
- );
-
- return task(config, targetConfig);
-};
diff --git a/bin/header.css b/bin/header.css
new file mode 100644
index 00000000..296a8ed4
--- /dev/null
+++ b/bin/header.css
@@ -0,0 +1,21 @@
+/*!
+ * Iconoir
+ * Copyright (c) [YEAR] Luca Burgio - https://iconoir.com
+ * License - https://github.com/lucaburgio/iconoir/blob/main/LICENSE (Code: MIT License)
+ * CSS file created by Till Esser (@Wiwaltill) and automated by Pascal Jufer (@paescuj)
+ */
+
+*[class^="iconoir-"]::before,
+*[class*=" iconoir-"]::before {
+ content: " ";
+ display: block;
+ background: currentColor;
+ mask-size: cover;
+ -webkit-mask-size: cover;
+ width: 1em;
+ height: 1em;
+}
+*[class^="iconoir-"],
+*[class*=" iconoir-"] {
+ display: block;
+}
diff --git a/bin/prepublish.js b/bin/prepublish.js
index da7dcae6..9d94f682 100644
--- a/bin/prepublish.js
+++ b/bin/prepublish.js
@@ -1,34 +1,28 @@
-/* eslint-disable no-console */
-
-import fs from 'node:fs';
-import path from 'node:path';
-import process from 'node:process';
import { updateYamlKey } from '@atomist/yaml-updater';
+import fs from 'fs';
+import path from 'path';
import semver from 'semver';
+const PACKAGE_BASE = '';
+
const newVersion = semver.valid(semver.coerce(process.env.TAG_NAME));
console.info('New version is %s', newVersion);
-
if (!newVersion) {
throw new Error(`Tag name ${process.env.TAG_NAME} is not valid.`);
}
-publishNpmPackage('iconoir');
-publishNpmPackage('iconoir-react');
-publishNpmPackage('iconoir-react-native');
-publishNpmPackage('iconoir-vue');
-publishPubPackage('iconoir-flutter');
-
function publishNpmPackage(name) {
console.info('Publishing %s', name);
- const packageJsonPath = name === 'iconoir'
- ? 'package.json'
- : path.join('packages', name, 'package.json');
-
+ const packageJsonPath =
+ name === 'iconoir'
+ ? 'package.json'
+ : path.join('packages', name, 'package.json');
const contents = JSON.parse(fs.readFileSync(packageJsonPath).toString());
contents.version = newVersion;
-
+ if (PACKAGE_BASE) {
+ contents.name = `${PACKAGE_BASE}/${name}`;
+ }
fs.writeFileSync(packageJsonPath, JSON.stringify(contents, undefined, 2));
console.info('package.json updated');
}
@@ -39,8 +33,13 @@ function publishPubPackage(name) {
fs.writeFileSync(
pubspecFilepath,
- updateYamlKey('version', newVersion, pubspecContents),
+ updateYamlKey('version', newVersion, pubspecContents)
);
console.info('pubspec.yaml updated');
}
+
+publishNpmPackage('iconoir');
+publishNpmPackage('iconoir-react');
+publishNpmPackage('iconoir-react-native');
+publishPubPackage('iconoir-flutter');
diff --git a/bin/templates/__svgfilename__.dart b/bin/templates/__svgfilename__.dart
new file mode 100644
index 00000000..2ad4c47f
--- /dev/null
+++ b/bin/templates/__svgfilename__.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+class __icon__(pascalCase) extends StatelessWidget {
+ final Color? color;
+ final double? width;
+ final double? height;
+
+ const __icon__(pascalCase)({Key? key, this.color, this.width, this.height})
+ : super(key: key);
+
+ @override
+ Widget build(BuildContext context) => SvgPicture.string(
+ '''
+__svgfilecontent__''',
+ color: color,
+ width: width,
+ height: height,
+ );
+}
diff --git a/bin/templates/icon-template.cjs b/bin/templates/icon-template.cjs
new file mode 100644
index 00000000..c72f8ac0
--- /dev/null
+++ b/bin/templates/icon-template.cjs
@@ -0,0 +1,26 @@
+const template = (
+ { template },
+ opts,
+ { imports, interfaces, componentName, props, jsx, exports }
+) => {
+ const plugins = ['jsx'];
+ if (opts.typescript) {
+ plugins.push('typescript');
+ }
+ const typeScriptTpl = template.smart({ plugins });
+ props[0].name = 'passedProps';
+ return typeScriptTpl.ast`${imports}
+import { IconoirContext } from './IconoirContext'
+
+${interfaces}
+
+function ${componentName}(${props}) {
+ const context = React.useContext(IconoirContext);
+ const props = { ...context, ...passedProps };
+ return ${jsx};
+}
+${exports}
+ `;
+};
+
+module.exports = template;
diff --git a/bin/templates/index-template.cjs b/bin/templates/index-template.cjs
new file mode 100644
index 00000000..6f3b6685
--- /dev/null
+++ b/bin/templates/index-template.cjs
@@ -0,0 +1,15 @@
+const path = require('path');
+
+function template(filePaths) {
+ const exportEntries = filePaths.map((filePath) => {
+ const basename = path.basename(filePath, path.extname(filePath));
+ const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename;
+ return `export { default as ${exportName} } from './${basename}'`;
+ });
+ exportEntries.push(
+ "export { IconoirProvider, IconoirContext, IconoirContextValue } from './IconoirContext'"
+ );
+ return exportEntries.join('\n');
+}
+
+module.exports = template;
diff --git a/constants.js b/constants.js
new file mode 100644
index 00000000..b6dfb914
--- /dev/null
+++ b/constants.js
@@ -0,0 +1,12 @@
+export const incompatibleNames = {
+ '1st-medal': 'medal-1st',
+ '4k-display': 'display-4k',
+ '2x2-cell': 'cell-2x2',
+ '360-view': 'view360',
+ github: 'gitHub',
+ 'github-outline': 'gitHubOutline',
+ 'gitlab-full': 'gitLabFull',
+ linkedin: 'linkedIn',
+ tiktok: 'tikTok',
+ youtube: 'youTube',
+};
diff --git a/css/README.md b/css/README.md
index 3d2a12ca..92407d27 100644
--- a/css/README.md
+++ b/css/README.md
@@ -1,9 +1,9 @@
-# Iconoir - CSS
+# Iconoir CSS
-Import the CSS file:
+Import the CSS File:
```html
-
-
-
- );
-}
diff --git a/examples/next/next.config.ts b/examples/next/next.config.ts
deleted file mode 100644
index 275909b6..00000000
--- a/examples/next/next.config.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { NextConfig } from 'next';
-
-const nextConfig: NextConfig = {
- experimental: {
- optimizePackageImports: ['iconoir-react'],
- },
-};
-
-export default nextConfig;
diff --git a/examples/next/package.json b/examples/next/package.json
deleted file mode 100644
index 847d7662..00000000
--- a/examples/next/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
- "name": "example-next",
- "private": true,
- "scripts": {
- "dev": "next dev --turbopack",
- "build": "next build",
- "start": "next start",
- "lint": "next lint"
- },
- "dependencies": {
- "next": "15.4.4",
- "react": "^19.0.0",
- "react-dom": "^19.0.0"
- },
- "devDependencies": {
- "@types/node": "^22.10.2",
- "@types/react": "^19.0.1",
- "@types/react-dom": "^19.0.2",
- "iconoir-react": "workspace:*",
- "typescript": "^5.7.2"
- }
-}
diff --git a/examples/next/tsconfig.json b/examples/next/tsconfig.json
deleted file mode 100644
index 5d306ce7..00000000
--- a/examples/next/tsconfig.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "compilerOptions": {
- "incremental": true,
- "target": "ES2017",
- "jsx": "preserve",
- "lib": ["dom", "dom.iterable", "esnext"],
- "module": "esnext",
- "moduleResolution": "bundler",
- "paths": {
- "@/*": ["./*"]
- },
- "resolveJsonModule": true,
- "allowJs": true,
- "strict": true,
- "noEmit": true,
- "esModuleInterop": true,
- "isolatedModules": true,
- "skipLibCheck": true,
- "plugins": [
- {
- "name": "next"
- }
- ]
- },
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
- "exclude": ["node_modules"]
-}
diff --git a/examples/react-native/.gitignore b/examples/react-native/.gitignore
deleted file mode 100644
index d16e1efb..00000000
--- a/examples/react-native/.gitignore
+++ /dev/null
@@ -1,36 +0,0 @@
-# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
-
-# dependencies
-node_modules/
-
-# Expo
-.expo/
-dist/
-web-build/
-expo-env.d.ts
-
-# Native
-*.orig.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-
-# Metro
-.metro-health-check*
-
-# debug
-npm-debug.*
-yarn-debug.*
-yarn-error.*
-
-# macOS
-.DS_Store
-*.pem
-
-# local env files
-.env*.local
-
-# typescript
-*.tsbuildinfo
diff --git a/examples/react-native/App.tsx b/examples/react-native/App.tsx
deleted file mode 100644
index bda4a224..00000000
--- a/examples/react-native/App.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Check, Iconoir, IconoirProvider } from 'iconoir-react-native';
-import { View } from 'react-native';
-
-export default function App() {
- return (
-
-
-
-
- );
-}
diff --git a/examples/react-native/app.json b/examples/react-native/app.json
deleted file mode 100644
index 173213a4..00000000
--- a/examples/react-native/app.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "expo": {
- "name": "Iconoir",
- "slug": "example-react-native",
- "version": "1.0.0",
- "orientation": "portrait",
- "userInterfaceStyle": "light",
- "newArchEnabled": true,
- "splash": {
- "backgroundColor": "#ffffff"
- },
- "ios": {
- "supportsTablet": true
- },
- "android": {
- "adaptiveIcon": {
- "backgroundColor": "#ffffff"
- }
- }
- }
-}
diff --git a/examples/react-native/index.ts b/examples/react-native/index.ts
deleted file mode 100644
index 1d6e981e..00000000
--- a/examples/react-native/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { registerRootComponent } from 'expo';
-
-import App from './App';
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in Expo Go or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);
diff --git a/examples/react-native/metro.config.js b/examples/react-native/metro.config.js
deleted file mode 100644
index 6ad921f6..00000000
--- a/examples/react-native/metro.config.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * Workaround to be able to import iconoir lib from workspace.
- * See also: https://github.com/pnpm/pnpm/issues/4286
- */
-
-const { makeMetroConfig } = require('@rnx-kit/metro-config');
-const MetroSymlinksResolver = require('@rnx-kit/metro-resolver-symlinks');
-const { getDefaultConfig } = require('expo/metro-config');
-
-const symlinksResolver = MetroSymlinksResolver({
- remapModule: (_context, moduleName) => {
- if (moduleName === 'iconoir-react-native') {
- return require.resolve(moduleName);
- }
-
- return moduleName;
- },
-},
-);
-
-/** @type {import('expo/metro-config').MetroConfig} */
-const expoConfig = getDefaultConfig(__dirname);
-
-/** @type {import('expo/metro-config').MetroConfig} */
-module.exports = makeMetroConfig({
- ...expoConfig,
- resolver: {
- ...expoConfig.resolver,
- resolveRequest: symlinksResolver,
- },
-});
diff --git a/examples/react-native/package.json b/examples/react-native/package.json
deleted file mode 100644
index 7336bc0e..00000000
--- a/examples/react-native/package.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
- "name": "example-react-native",
- "version": "1.0.0",
- "private": true,
- "main": "index.ts",
- "scripts": {
- "start": "expo start",
- "android": "expo start --android",
- "ios": "expo start --ios",
- "web": "expo start --web"
- },
- "dependencies": {
- "expo": "^53.0.20",
- "expo-status-bar": "^2.0.0",
- "iconoir-react-native": "workspace:*",
- "react": "^19.0.0",
- "react-dom": "^19.0.0",
- "react-native": "^0.79.5",
- "react-native-svg": "^15.11.2",
- "react-native-web": "^0.20.0"
- },
- "devDependencies": {
- "@babel/core": "^7.25.2",
- "@react-native/metro-config": "^0.79.5",
- "@rnx-kit/metro-config": "^2.0.1",
- "@rnx-kit/metro-resolver-symlinks": "^0.2.1",
- "@types/react": "^19.0.14",
- "typescript": "~5.8.3"
- }
-}
diff --git a/examples/react-native/tsconfig.json b/examples/react-native/tsconfig.json
deleted file mode 100644
index b9567f60..00000000
--- a/examples/react-native/tsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "extends": "expo/tsconfig.base",
- "compilerOptions": {
- "strict": true
- }
-}
diff --git a/examples/vue/.gitignore b/examples/vue/.gitignore
deleted file mode 100644
index 8ee54e8d..00000000
--- a/examples/vue/.gitignore
+++ /dev/null
@@ -1,30 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
-*.tsbuildinfo
diff --git a/examples/vue/env.d.ts b/examples/vue/env.d.ts
deleted file mode 100644
index 11f02fe2..00000000
--- a/examples/vue/env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// Iconoir
-
-
-
-
-
-
diff --git a/examples/vue/package.json b/examples/vue/package.json
deleted file mode 100644
index bdc94cf5..00000000
--- a/examples/vue/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
- "name": "example-vue",
- "type": "module",
- "private": true,
- "scripts": {
- "dev": "vite",
- "build": "run-p type-check \"build-only {@}\" --",
- "preview": "vite preview",
- "build-only": "vite build",
- "type-check": "vue-tsc --build"
- },
- "dependencies": {
- "vue": "^3.5.18"
- },
- "devDependencies": {
- "@iconoir/vue": "workspace:*",
- "@tsconfig/node22": "^22.0.2",
- "@types/node": "^22.16.5",
- "@vitejs/plugin-vue": "^6.0.0",
- "@vue/tsconfig": "^0.7.0",
- "npm-run-all2": "^8.0.4",
- "typescript": "~5.8.3",
- "vite": "^7.0.6",
- "vite-plugin-vue-devtools": "^7.7.7",
- "vue-tsc": "^3.0.4"
- }
-}
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
deleted file mode 100644
index 448ab040..00000000
--- a/examples/vue/src/App.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
-
-
diff --git a/examples/vue/src/main.ts b/examples/vue/src/main.ts
deleted file mode 100644
index 684d0421..00000000
--- a/examples/vue/src/main.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-
-createApp(App).mount('#app');
diff --git a/examples/vue/tsconfig.app.json b/examples/vue/tsconfig.app.json
deleted file mode 100644
index 95588cd0..00000000
--- a/examples/vue/tsconfig.app.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
- "extends": "@vue/tsconfig/tsconfig.dom.json",
- "compilerOptions": {
- "composite": true,
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
- "paths": {
- "@/*": ["./src/*"]
- }
- },
- "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
- "exclude": ["src/**/__tests__/*"]
-}
diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json
deleted file mode 100644
index d85c910c..00000000
--- a/examples/vue/tsconfig.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
- "references": [
- {
- "path": "./tsconfig.node.json"
- },
- {
- "path": "./tsconfig.app.json"
- }
- ],
- "files": []
-}
diff --git a/examples/vue/tsconfig.node.json b/examples/vue/tsconfig.node.json
deleted file mode 100644
index a129c39d..00000000
--- a/examples/vue/tsconfig.node.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "extends": "@tsconfig/node22/tsconfig.json",
- "compilerOptions": {
- "composite": true,
- "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-
- "module": "ESNext",
- "moduleResolution": "Bundler",
- "types": ["node"],
- "noEmit": true
- },
- "include": [
- "vite.config.*",
- "vitest.config.*",
- "cypress.config.*",
- "nightwatch.conf.*",
- "playwright.config.*"
- ]
-}
diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts
deleted file mode 100644
index cadb514e..00000000
--- a/examples/vue/vite.config.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { fileURLToPath, URL } from 'node:url';
-
-import vue from '@vitejs/plugin-vue';
-import { defineConfig } from 'vite';
-import vueDevTools from 'vite-plugin-vue-devtools';
-
-// https://vite.dev/config/
-export default defineConfig({
- plugins: [
- vue(),
- vueDevTools(),
- ],
- resolve: {
- alias: {
- '@': fileURLToPath(new URL('./src', import.meta.url)),
- },
- },
-});
diff --git a/iconoir.com/.eslintrc.json b/iconoir.com/.eslintrc.json
new file mode 100755
index 00000000..92ada67c
--- /dev/null
+++ b/iconoir.com/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+ "extends": "next/core-web-vitals",
+ "rules": {
+ "react/no-unescaped-entities": ["off"]
+ }
+}
diff --git a/iconoir.com/.gitignore b/iconoir.com/.gitignore
old mode 100644
new mode 100755
diff --git a/iconoir.com/README.md b/iconoir.com/README.md
new file mode 100755
index 00000000..c87e0421
--- /dev/null
+++ b/iconoir.com/README.md
@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/iconoir.com/components/Ad.tsx b/iconoir.com/components/Ad.tsx
index 485727ef..9cedf5d1 100644
--- a/iconoir.com/components/Ad.tsx
+++ b/iconoir.com/components/Ad.tsx
@@ -1,11 +1,29 @@
import React from 'react';
import styled from 'styled-components';
+export function Ad() {
+ const containerRef = React.useRef(null);
+ const addedScript = React.useRef(false);
+ React.useEffect(() => {
+ const container = containerRef.current;
+ if (container && !addedScript.current) {
+ addedScript.current = true;
+ const script = document.createElement('script');
+ script.async = true;
+ script.type = 'text/javascript';
+ script.src =
+ '//cdn.carbonads.com/carbon.js?serve=CESDK5QJ&placement=iconoircom';
+ script.id = '_carbonads_js';
+ container.appendChild(script);
+ }
+ }, []);
+ return (null);
- const addedScript = React.useRef(false);
-
- React.useEffect(() => {
- const container = containerRef.current;
-
- if (container && !addedScript.current) {
- addedScript.current = true;
- const script = document.createElement('script');
- script.async = true;
- script.type = 'text/javascript';
- script.src = '//cdn.carbonads.com/carbon.js?serve=CESDK5QJ&placement=iconoircom';
- script.id = '_carbonads_js';
- container.appendChild(script);
- }
- }, []);
-
- return (null);
-
React.useEffect(() => {
instancesRef.current = playWithLines1((instances) => {
instancesRef.current = instances;
});
-
return () => {
for (const instance of instancesRef.current || []) {
instance.pause();
}
};
}, []);
-
return (
+ Available For
+
+
+ Available for
+
+
+
+
+
+
+
+
+
+
+
+
+ More?
+
+
+ Are you using the library?
+
+
+
+
+
+ );
+}
+
const AreYouUsing = styled.div`
* {
white-space: nowrap;
}
`;
-
const MobileHeader = styled(Text14)`
- &&& {
- display: block;
- margin-top: 5px;
- text-align: center;
- ${media.lg} {
- display: none;
- }
- }
-`;
-
-const DesktopHeader = styled(Text14)`
- &&& {
+ display: block;
+ margin-top: 5px;
+ text-align: center;
+ ${media.lg} {
display: none;
- ${media.lg} {
- display: block;
- }
}
`;
-
+const DesktopHeader = styled(Text14)`
+ display: none;
+ ${media.lg} {
+ display: block;
+ }
+`;
const AvailableForAnimation = keyframes`
5% {
transform: translateX(0);
@@ -48,30 +99,26 @@ const AvailableForAnimation = keyframes`
transform: translateX(0);
}
`;
-
const AvailableForOuter = styled.div`
max-width: 100vw;
margin: 16px -30px 70px -30px;
padding: 0 30px;
overflow: hidden;
${media.lg} {
- margin: 80px auto;
+ margin: 120px auto;
padding: 0;
}
`;
-
-const AvailableForContainer = styled.div<{ $contentWidth: number }>`
+const AvailableForContainer = styled.div<{ contentWidth: number }>`
display: flex;
align-items: center;
justify-content: flex-start;
width: max-content;
- --content-width: ${(props) => props.$contentWidth}px;
- ${(props) =>
- props.$contentWidth
- && css`
- animation: ${AvailableForAnimation} 40s cubic-bezier(0.37, 0, 0.63, 1)
- infinite;
- `}
+ --content-width: ${(props) => props.contentWidth}px;
+ ${(props) => (props.contentWidth ? '&' : '&.noop')} {
+ animation: ${AvailableForAnimation} 40s cubic-bezier(0.37, 0, 0.63, 1)
+ infinite;
+ }
> :not(:last-child) {
margin-right: 30px;
}
@@ -82,124 +129,14 @@ const AvailableForContainer = styled.div<{ $contentWidth: number }>`
}
${media.md} {
> :not(:last-child) {
- margin-right: 40px;
+ margin-right: 60px;
}
}
`;
-
const AvailableForImage = styled.img`
height: 40px;
display: block;
- transition: 0.2s;
- &:hover {
- scale: 1.2;
- transition: 0.2s;
- }
${media.lg} {
height: 50px;
}
`;
-
-export function AvailableFor() {
- const { ref, width } = useResizeObserver();
-
- return (
- <>
- Available For
-
-
- Available for
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- More?
-
-
- Are you using the library?
-
-
-
-
-
- );
-}
diff --git a/iconoir.com/components/Button.tsx b/iconoir.com/components/Button.tsx
index c357cd41..4368fae1 100644
--- a/iconoir.com/components/Button.tsx
+++ b/iconoir.com/components/Button.tsx
@@ -12,74 +12,55 @@ export const ResetButton = styled.button`
`;
export const LargeButton = styled(ResetButton)`
- &&& {
- background: var(--white);
- height: 75px;
- border-radius: 10px 50px 50px 50px;
- border: solid 2px var(--g0);
-
- box-shadow: 0px 8px 0px 0px var(--g0);
-
- display: inline-flex;
- align-items: center;
- text-decoration: none;
- color: var(--g0);
- padding: 0 70px;
- font-size: 20px;
- line-height: 26px;
+ background: var(--black);
+ height: 75px;
+ display: inline-flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--white);
+ padding: 0 43px;
+ font-size: 20px;
+ line-height: 26px;
+ font-weight: 700;
+ position: relative;
+ cursor: pointer;
+ z-index: 12;
+ > :not(:last-child) {
+ margin-right: 15px;
+ }
+ * {
font-weight: 700;
- position: relative;
- cursor: pointer;
- z-index: 12;
- > :not(:last-child) {
- margin-right: 15px;
- }
- * {
- font-weight: 700;
- }
- transition: 0.2s;
- &:hover {
- box-shadow: 0px 3px 0px 0px var(--g0);
- transform: translateY(5px);
- }
- &:focus::after,
- &:hover::after {
- inset: -7px;
- opacity: 1;
- }
+ }
+ &::after {
+ content: ' ';
+ display: block;
+ position: absolute;
+ inset: 0;
+ border: solid 3px var(--black);
+ opacity: 0;
+ transition: inset 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s linear;
+ z-index: 10;
+ }
+ &:focus::after,
+ &:hover::after {
+ inset: -7px;
+ opacity: 1;
}
`;
-const Button = styled(LargeButton)`
- &&&& {
- height: 40px;
- font-size: 13px;
- line-height: 21px;
- padding: 0 18px;
- &::after {
- border-width: 2px;
- }
- &:focus::after,
- &:hover::after {
- inset: -4px;
- }
- &:active {
- background: var(--darker-gray);
- }
- }
-`;
-
-export const CopyButton = styled(Button)`
- &&&&& {
- text-transform: uppercase;
- background: var(--white);
- height: 30px;
- padding: 0 12px;
- font-size: 11px;
- letter-spacing: 0.12em;
- line-height: 17.6px;
- font-weight: 700;
- color: var(--black);
- font-family: var(--font-family);
+export const Button = styled(LargeButton)`
+ height: 40px;
+ font-size: 13px;
+ line-height: 21px;
+ padding: 0 18px;
+ &::after {
+ border-width: 2px;
+ }
+ &:focus::after,
+ &:hover::after {
+ inset: -4px;
+ }
+ &:active {
+ background: var(--darker-gray);
}
`;
diff --git a/iconoir.com/components/CategoryRow.tsx b/iconoir.com/components/CategoryRow.tsx
index 7fa4c85b..249e2cde 100644
--- a/iconoir.com/components/CategoryRow.tsx
+++ b/iconoir.com/components/CategoryRow.tsx
@@ -1,7 +1,27 @@
+import React from 'react';
import styled from 'styled-components';
-import { media } from '../lib/responsive';
+import { media } from './responsive';
import { Text15 } from './Typography';
+export interface CategoryRowProps {
+ category: string;
+ numIcons: number;
+ style?: any;
+}
+export function CategoryRow({ category, numIcons, style }: CategoryRowProps) {
+ return (
+
+
+ {category}
+
+ {numIcons} Icon{numIcons === 1 ? '' : 's'}
+
+
+
+ );
+}
+
const InnerContainer = styled.div`
display: flex;
align-items: center;
@@ -13,7 +33,6 @@ const InnerContainer = styled.div`
margin-right: 10px;
}
`;
-
const Container = styled.div`
display: flex;
align-items: flex-end;
@@ -23,42 +42,12 @@ const Container = styled.div`
padding-bottom: 40px;
}
`;
-
const Title = styled(Text15)`
- &&& {
- font-weight: 700;
- color: var(--g0);
- background-color: var(--g6);
- border-radius: 8px;
- padding: 6px 10px;
- }
+ font-weight: 700;
+ color: var(--black);
`;
-
const Separator = styled.div`
height: 1px;
flex: 1;
- background: var(--g6);
+ background: var(--light-gray);
`;
-
-export interface CategoryRowProps {
- category: string;
- numIcons: number;
- style?: any;
-}
-
-export function CategoryRow({ category, numIcons, style }: CategoryRowProps) {
- return (
-
-
- {category}
-
- {numIcons}
- {' '}
- Icon
- {numIcons === 1 ? '' : 's'}
-
-
-
- );
-}
diff --git a/iconoir.com/components/ChangelogEntry.tsx b/iconoir.com/components/ChangelogEntry.tsx
index 886bd964..063f9459 100644
--- a/iconoir.com/components/ChangelogEntry.tsx
+++ b/iconoir.com/components/ChangelogEntry.tsx
@@ -1,17 +1,70 @@
-import type { MDXRemoteSerializeResult } from 'next-mdx-remote';
import { BoxIso } from 'iconoir-react';
-import moment from 'moment';
import React from 'react';
import styled from 'styled-components';
-import { media } from '../lib/responsive';
-import { CopyButton } from './Button';
+import { Code, CopyButton, Text15, Text18 } from './Typography';
+import moment from 'moment';
+import { MDXRemoteSerializeResult } from 'next-mdx-remote';
import { MDXRemote } from './MDXRemote';
-import { Code, Text15, Text18 } from './Typography';
+import { FILE_PREFIX } from './constants';
+import { media } from './responsive';
const EXPAND_HEIGHT = 400;
+export interface ChangelogEntryProps {
+ name: string;
+ body: MDXRemoteSerializeResult;
+ created_at: string;
+}
+export function ChangelogEntry({
+ name,
+ body,
+ created_at,
+}: ChangelogEntryProps) {
+ const [expanded, setExpanded] = React.useState(false);
+ const [shouldExpand, setShouldExpand] = React.useState(false);
+ const containerRef = React.useRef(null);
+ React.useEffect(() => {
+ if (
+ containerRef.current &&
+ containerRef.current.clientHeight > EXPAND_HEIGHT
+ ) {
+ setShouldExpand(true);
+ }
+ }, []);
+ return (
+
+
+
+
+
+
+ {name}
+
+ {moment(created_at).format('MMM DD, YYYY')}
+
+
+
+
+ setExpanded((e) => !e)}>
+ {expanded ? 'Collapse' : 'Expand'}
+
+
+ ) : null}
+
+
+ );
+}
+
const Container = styled.div`
- margin: 40px 0;
+ margin: 40px 0 !important;
display: flex;
align-items: stretch;
flex-direction: column;
@@ -19,10 +72,9 @@ const Container = styled.div`
${media.lg} {
flex-direction: row;
align-items: flex-start;
- margin: 24px 0;
+ margin: 24px 0 !important;
}
`;
-
const ContainerLeft = styled.div`
display: flex;
align-items: flex-start;
@@ -32,115 +84,46 @@ const ContainerLeft = styled.div`
margin-right: 30px;
}
`;
-
const ContainerIcon = styled.div`
font-size: 18px;
color: var(--black);
margin-right: 18px;
`;
-
const TitleContainer = styled.div`
width: 100px;
`;
-
const EntryTitle = styled(Text18)`
- &&& {
- color: var(--black);
- font-weight: 700;
- }
+ color: var(--black);
+ font-weight: 700;
`;
-
const ExpandContainer = styled.div`
position: absolute;
bottom: 16px;
right: 23px;
`;
-
-const EntryBody = styled(Code)<{ $expanded?: boolean }>`
- &&& {
- flex: 1;
+const EntryBody = styled(Code)<{ expanded?: boolean }>`
+ flex: 1;
+ margin: 0;
+ max-height: ${(props) => (props.expanded ? 'none' : `${EXPAND_HEIGHT}px`)};
+ position: relative;
+ overflow: hidden;
+ * {
+ font-family: var(--code-family);
+ }
+ ul {
+ list-style: none none;
margin: 0;
- max-height: ${(props) => (props.$expanded ? 'none' : `${EXPAND_HEIGHT}px`)};
- position: relative;
- overflow: hidden;
- * {
- font-family: var(--code-family);
- }
- ul {
- list-style: none none;
- margin: 0;
- padding: 0;
- li {
- margin-bottom: 8px;
- }
- }
- code {
- display: inline-block;
- background: var(--g5);
- color: var(--black);
- font-family: var(--font-family) !important;
- padding: 0 4px;
- font-size: 18px;
+ padding: 0;
+ li {
+ margin-bottom: 8px;
}
}
+ code {
+ display: inline-block;
+ background: var(--gray) !important;
+ color: var(--black);
+ font-family: var(--font-family) !important;
+ padding: 0 4px;
+ font-size: 18px !important;
+ }
`;
-
-export interface ChangelogEntryProps {
- name: string;
- url: string;
- created_at: string;
- body?: MDXRemoteSerializeResult;
-}
-
-export function ChangelogEntry({
- name,
- url,
- body,
- created_at,
-}: ChangelogEntryProps) {
- const [expanded, setExpanded] = React.useState(false);
- const [shouldExpand, setShouldExpand] = React.useState(false);
- const containerRef = React.useRef(null);
-
- React.useEffect(() => {
- if (
- containerRef.current
- && containerRef.current.clientHeight > EXPAND_HEIGHT
- ) {
- setShouldExpand(true);
- }
- }, []);
-
- return (
-
-
-
-
-
-
- {name}
-
- {moment(created_at).format('MMM DD, YYYY')}
-
-
-
- {body ?
- setExpanded((e) => !e)}>
- {expanded ? 'Collapse' : 'Expand'}
-
-
- )
- : null}
-
-
- );
-}
diff --git a/iconoir.com/components/CurrentVersion.tsx b/iconoir.com/components/CurrentVersion.tsx
index ade4982d..da9858a6 100644
--- a/iconoir.com/components/CurrentVersion.tsx
+++ b/iconoir.com/components/CurrentVersion.tsx
@@ -1,35 +1,29 @@
import Link from 'next/link';
+import React from 'react';
import styled from 'styled-components';
import { Text13 } from './Typography';
+export interface CurrentVersionProps {
+ version: string;
+ color?: string;
+}
+export function CurrentVersion({ version, color }: CurrentVersionProps) {
+ return (
+
+ {version}
+
+
+ );
+}
+
const Container = styled(Text13)`
-&&& {
- color: var(--g1);
+ color: var(--black);
font-weight: 700;
- background: var(--g5);
+ background: var(--pink);
line-height: 1;
padding: 7px 16px;
border-radius: 200px;
display: block;
- text-decoration: none;
- transition:
- color 0.1s linear,
- background 0.1s linear;
- &:hover {
- background: var(--black);
- color: var(--white);
- }
-}
+ text-decoration: none !important;
`;
-
-export interface CurrentVersionProps {
- version: string;
-}
-
-export function CurrentVersion({ version }: CurrentVersionProps) {
- return (
- {version}
-
- );
-}
diff --git a/iconoir.com/components/CustomizationEditor.tsx b/iconoir.com/components/CustomizationEditor.tsx
index 06bb6af5..836a9ff7 100644
--- a/iconoir.com/components/CustomizationEditor.tsx
+++ b/iconoir.com/components/CustomizationEditor.tsx
@@ -1,62 +1,16 @@
-import type { IconListCustomizations } from './IconList';
import React from 'react';
+import { DEFAULT_CUSTOMIZATIONS, IconListCustomizations } from './IconList';
import styled from 'styled-components';
-import { media } from '../lib/responsive';
-import { DEFAULT_CUSTOMIZATIONS } from './IconList';
-import { ColorButton, ColorInput } from './Input';
+import { Text13, Text18 } from './Typography';
+import { Button } from './Button';
+import { ColorInput } from './Input';
import { Slider } from './Slider';
-import { Text13, Text15 } from './Typography';
-
-const CustomizationBox = styled.div`
- background-color: var(--g7);
- width: 84%;
- padding: 8%;
- border-radius: 10px;
- margin: 24px 0;
- display: none;
- ${media.md} {
- display: block;
- }
-`;
-
-const Header = styled.div`
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 30px;
- border-bottom: solid 1px var(--g6);
- padding-bottom: 10px;
-`;
-
-const Field = styled.div`
- margin-bottom: 18px;
-`;
-
-const HorizontalField = styled(Field)`
- display: flex;
- align-items: center;
- justify-content: space-between;
-`;
-
-const ResetButton = styled(Field)`
- &&& {
- margin: initial;
- text-decoration: underline;
- color: var(--dark-gray);
- font-size: 13px;
-
- &:hover {
- color: var(--black);
- cursor: pointer;
- }
- }
-`;
export interface CustomizationEditorProps {
customizations: IconListCustomizations;
+ // eslint-disable-next-line no-unused-vars
onChange: (customizations: IconListCustomizations) => void;
}
-
export function CustomizationEditor({
customizations,
onChange,
@@ -64,11 +18,9 @@ export function CustomizationEditor({
const [, startTransition] = (React as any).useTransition();
const [color, setColor] = React.useState(customizations.hexColor);
const [size, setSize] = React.useState(customizations.size);
-
const [strokeWidth, setStrokeWidth] = React.useState(
- customizations.strokeWidth,
+ customizations.strokeWidth
);
-
React.useEffect(() => {
setColor(customizations.hexColor);
setSize(customizations.size);
@@ -86,55 +38,65 @@ export function CustomizationEditor({
return (
<>
-
-
-
- Customize
-
- onChange(DEFAULT_CUSTOMIZATIONS)}>
- Reset
-
-
-
- {
- setSize(values[0]);
- updateCustomizations({ size: values[0] });
- }}
- />
-
-
- {
- setStrokeWidth(values[0]);
- updateCustomizations({ strokeWidth: values[0] });
- }}
- />
-
-
- Color
- {
- setColor(e.target.value);
- updateCustomizations({ hexColor: e.target.value });
- }}
- />
-
-
+
+
+ Customize
+
+ onChange(DEFAULT_CUSTOMIZATIONS)}>Reset
+
+
+ {
+ setSize(values[0]);
+ updateCustomizations({ size: values[0] });
+ }}
+ />
+
+
+ {
+ setStrokeWidth(values[0]);
+ updateCustomizations({ strokeWidth: values[0] });
+ }}
+ />
+
+
+ Color
+ {
+ setColor(e.target.value);
+ updateCustomizations({ hexColor: e.target.value });
+ }}
+ />
+
);
}
+
+const Header = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 45px;
+`;
+const Field = styled.div`
+ margin-bottom: 35px;
+`;
+const HorizontalField = styled(Field)`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+`;
diff --git a/iconoir.com/components/DocumentationNavigation.tsx b/iconoir.com/components/DocumentationNavigation.tsx
index 41efcc3a..74c24004 100644
--- a/iconoir.com/components/DocumentationNavigation.tsx
+++ b/iconoir.com/components/DocumentationNavigation.tsx
@@ -1,15 +1,95 @@
-import type { DocumentationItem } from '../pages/docs/[...slug]';
-import { NavArrowUp } from 'iconoir-react';
+import React from 'react';
+import { DocumentationItem } from '../pages/docs/[...slug]';
+import styled from 'styled-components';
import Link from 'next/link';
import { useRouter } from 'next/router';
-import React from 'react';
-import styled from 'styled-components';
-import { media } from '../lib/responsive';
+import { media } from './responsive';
+import { NavArrowUp } from 'iconoir-react';
-const HeaderItemIcon = styled.div<{ $active?: boolean }>`
+export interface DocumentationNavigationProps {
+ documentationItems: DocumentationItem[];
+ pathPrefix?: string[];
+}
+export function DocumentationNavigation({
+ documentationItems,
+ pathPrefix,
+}: DocumentationNavigationProps) {
+ const router = useRouter();
+ const activePath = router.asPath.replace('/docs/', '');
+ const [expandedTitles, setExpandedTitles] = React.useState([]);
+ React.useEffect(() => {
+ const expandedItems = documentationItems.filter((item) => {
+ const normalized = activePath.replace((pathPrefix || []).join('/'), '');
+ return (
+ normalized === item.path ||
+ item.children?.some((child) => {
+ return activePath.startsWith(
+ [item.path, child.path].filter(Boolean).join('/')
+ );
+ })
+ );
+ });
+ setExpandedTitles(expandedItems.map((item) => item.title));
+ }, [activePath, pathPrefix, documentationItems]);
+ return (
+ <>
+ {documentationItems.map((documentationItem) => {
+ const path = [...(pathPrefix || []), documentationItem.path]
+ .filter(Boolean)
+ .join('/');
+ if (documentationItem.children?.length) {
+ const active = expandedTitles.includes(documentationItem.title);
+ return (
+
+ {
+ setExpandedTitles((et) => {
+ const includes = et.includes(documentationItem.title);
+ return includes
+ ? et.filter((i) => i !== documentationItem.title)
+ : [...et, documentationItem.title];
+ });
+ }}
+ >
+
+
+ {documentationItem.title}
+
+
+
+
+ );
+ } else {
+ return (
+
+ {documentationItem.title}
+ {documentationItem.label ? (
+
+ {documentationItem.label}
+
+ ) : null}
+
+
+ );
+ }
+ })}
+
+ );
+}
+
+const HeaderItemIcon = styled.div<{ active?: boolean }>`
font-size: 13px;
transition: transform 0.25s linear;
- transform: rotate(${(props) => (props.$active ? 180 : 0)}deg);
+ transform: rotate(${(props) => (props.active ? 180 : 0)}deg);
margin-right: 7px;
position: relative;
top: 6px;
@@ -20,19 +100,19 @@ const HeaderItemIcon = styled.div<{ $active?: boolean }>`
display: none;
}
`;
-
-const ChildrenContainer = styled.div<{ $expanded?: boolean }>`
- display: ${(props) => (props.$expanded ? 'block' : 'none')};
+const ChildrenContainer = styled.div<{ expanded?: boolean }>`
+ display: ${(props) => (props.expanded ? 'block' : 'none')};
${media.lg} {
display: block;
}
`;
-
const HeaderItem = styled.div`
padding: 10px 30px;
- font-size: 15px;
+ text-transform: uppercase;
+ font-size: 12px;
line-height: 19px;
- color: var(--g0);
+ color: var(--black);
+ letter-spacing: 0.12em;
font-weight: 700;
display: flex;
align-items: baseline;
@@ -46,144 +126,45 @@ const HeaderItem = styled.div`
}
}
`;
-
-const NavigationItem = styled.div<{ $active?: boolean }>`
- padding: 12px 12px 12px 75px;
- transition:
- background 0.1s linear,
- color 0.1s linear;
+const NavigationItem = styled.div<{ active?: boolean }>`
+ padding: 12px 45px 12px 75px;
+ transition: background 0.1s linear, color 0.1s linear;
+ font-weight: 500;
font-size: 16px;
line-height: 14.5px;
letter-spacing: -0.02em;
- color: var(--g1);
+ color: var(--black-60);
display: flex;
align-items: center;
text-decoration: none;
span {
- font-weight: 400;
+ font-weight: 500;
}
> :not(:last-child) {
margin-right: 14px;
}
&:hover,
- ${(props) => (props.$active ? '&' : '&.noop')} {
- color: var(--g0);
- text-decoration: underline;
+ ${(props) => (props.active ? '&' : '&.noop')} {
+ background: var(--light-gray);
+ color: var(--black);
}
- ${(props) => (props.$active ? 'span' : '&.noop')} {
- font-weight: 500;
+ ${(props) => (props.active ? 'span' : '&.noop')} {
+ font-weight: 700;
}
${media.lg} {
- padding: 12px 12px 12px 65px;
+ padding: 12px 45px 12px 65px;
}
`;
-
const NavigationItemLabel = styled.span`
display: flex;
align-items: center;
justify-content: center;
- padding: 2px 6px;
- border-radius: 4px;
+ padding: 0 4px;
font-size: 11px;
line-height: 17.6px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
- color: var(--g1);
- background: var(--g5);
+ color: var(--white);
+ background: var(--black);
`;
-
-export interface DocumentationNavigationProps {
- documentationItems: DocumentationItem[];
- pathPrefix?: string[];
-}
-
-export function DocumentationNavigation({
- documentationItems,
- pathPrefix,
-}: DocumentationNavigationProps) {
- const router = useRouter();
- const activePath = router.asPath.replace('/docs/', '');
- const [expandedTitles, setExpandedTitles] = React.useState([]);
-
- React.useEffect(() => {
- const expandedItems = documentationItems.filter((item) => {
- const normalized = activePath.replace((pathPrefix || []).join('/'), '');
-
- return (
- normalized === item.path
- || item.children?.some((child) => {
- return activePath.startsWith(
- [item.path, child.path].filter(Boolean).join('/'),
- );
- })
- );
- });
-
- setExpandedTitles(expandedItems.map((item) => item.title));
- }, [activePath, pathPrefix, documentationItems]);
-
- return (
- <>
- {documentationItems.map((documentationItem) => {
- const path = [...(pathPrefix || []), documentationItem.path]
- .filter(Boolean)
- .join('/');
-
- if (documentationItem.children?.length) {
- const active = expandedTitles.includes(documentationItem.title);
-
- return (
-
- {
- setExpandedTitles((et) => {
- const includes = et.includes(documentationItem.title);
-
- return includes
- ? et.filter((i) => i !== documentationItem.title)
- : [...et, documentationItem.title];
- });
- }}
- >
-
-
- {documentationItem.title}
-
-
-
-
- );
- } else {
- return (
-
- {documentationItem.title}
- {documentationItem.label
- ? (
-
- {documentationItem.label}
-
- )
- : null}
-
-
- );
- }
- })}
-
- );
-}
diff --git a/iconoir.com/components/DonationPopup.tsx b/iconoir.com/components/DonationPopup.tsx
deleted file mode 100644
index 8f34162b..00000000
--- a/iconoir.com/components/DonationPopup.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import { Sparks } from 'iconoir-react';
-import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-import { media } from '../lib/responsive';
-
-const Text = styled.span`
- color: #ffffffba;
-`;
-
-const PopupContent = styled.div`
- display: none;
- ${media.lg} {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 14px 0;
- background: #8330c6;
- color: var(--white);
- font-weight: 500;
- font-size: 15px;
- position: fixed;
- top: 16px;
- left: 16px;
- right: 16px;
- border-radius: 8px;
- z-index: 9999;
- margin: auto;
- }
- > * {
- margin: 0 4px;
- }
- > a {
- color: var(--white);
- opacity: 1;
- text-decoration: underline;
- }
-`;
-
-const CloseButton = styled.span`
- color: var(--white);
- float: right;
- font-size: 28px;
- font-weight: bold;
- &:hover,
- &:focus {
- color: black;
- text-decoration: none;
- cursor: pointer;
- }
-`;
-
-export function DonationPopup() {
- const [isVisible, setIsVisible] = useState(false);
- const isInitialMount = useRef(true);
-
- useEffect(() => {
- if (isInitialMount.current) {
- isInitialMount.current = false;
- const isReturningUser = localStorage.getItem('returningUser');
- const isReturningUserAge = localStorage.getItem('returningUserAge');
-
- if (isReturningUser === 'true' && isReturningUserAge === 'false') {
- setTimeout(() => setIsVisible(true), 15000);
- localStorage.setItem('returningUserAge', 'true');
- } else {
- localStorage.setItem('returningUser', 'true');
- localStorage.setItem('returningUserAge', 'false');
- }
- }
- }, []);
-
- const handleClose = () => {
- setIsVisible(false);
- };
-
- return (
- <>
- {isVisible && (
-
-
- Your one-time or recurring contribution does a lot to keep Iconoir
- going.
-
-
- Support the project!
-
- ×
-
- )}
-
- );
-}
diff --git a/iconoir.com/components/Explore.tsx b/iconoir.com/components/Explore.tsx
index 01966ee5..7df08909 100644
--- a/iconoir.com/components/Explore.tsx
+++ b/iconoir.com/components/Explore.tsx
@@ -1,72 +1,23 @@
-import type { Icon, IconListFilters } from './IconList';
import { IconoirProvider } from 'iconoir-react';
import React from 'react';
import styled from 'styled-components';
-import { media } from '../lib/responsive';
+import { Ad } from './Ad';
import { CustomizationEditor } from './CustomizationEditor';
import { FiltersEditor } from './FiltersEditor';
-import { IconList } from './IconList';
-import { Streamline } from './Streamline';
+import { Icon, IconList, IconListFilters } from './IconList';
+import { media } from './responsive';
import { useCustomizationPersistence } from './useCustomizationPersistence';
-const Container = styled.div`
- display: flex;
- flex-direction: column-reverse;
- ${media.md} {
- align-items: flex-start;
- flex-direction: row;
- }
-`;
-
-const Left = styled.div`
- flex: 1;
- min-height: calc(100vh - 100px);
- background: white;
- ${media.md} {
- background: none;
- }
-`;
-
-const Right = styled.div`
- position: sticky;
- top: 20px;
- width: 275px;
- display: block;
- z-index: -1;
- margin: 110px auto;
- ${media.md} {
- margin-left: 68px;
- z-index: 1;
- }
-`;
-
-const FilterContainer = styled.div<{ $isMobile?: boolean }>`
- display: ${(props) => (props.$isMobile ? 'block' : 'none')};
- margin-bottom: 40px;
- position: sticky;
- top: 20px;
- z-index: 100;
- width: 100%;
- ${media.md} {
- position: relative;
- top: 0;
- display: ${(props) => (props.$isMobile ? 'none' : 'block')};
- margin-bottom: 10px;
- }
-`;
-
export interface ExploreProps {
allIcons: Icon[];
}
-
export function Explore({ allIcons }: ExploreProps) {
const [filters, setFilters] = React.useState({});
const [customizations, setCustomizations] = useCustomizationPersistence();
-
return (
-
+
-
);
}
+
+const Container = styled.div`
+ display: flex;
+ align-items: flex-start;
+ flex-direction: row;
+`;
+const Left = styled.div`
+ flex: 1;
+ min-height: calc(100vh - 100px);
+`;
+const Right = styled.div`
+ position: sticky;
+ top: 50px;
+ width: 275px;
+ margin-left: 68px;
+ display: none;
+ ${media.md} {
+ display: block;
+ }
+`;
+const FilterContainer = styled.div<{ isMobile?: boolean }>`
+ display: ${(props) => (props.isMobile ? 'block' : 'none')};
+ margin-bottom: 40px;
+ position: sticky;
+ top: 20px;
+ z-index: 100;
+ ${media.md} {
+ position: relative;
+ top: 0;
+ display: ${(props) => (props.isMobile ? 'none' : 'block')};
+ margin-bottom: 50px;
+ }
+`;
diff --git a/iconoir.com/components/FiltersEditor.tsx b/iconoir.com/components/FiltersEditor.tsx
index 05b3714f..54ca3b3d 100644
--- a/iconoir.com/components/FiltersEditor.tsx
+++ b/iconoir.com/components/FiltersEditor.tsx
@@ -1,33 +1,15 @@
-import type { IconListFilters } from './IconList';
import React from 'react';
+import { IconListFilters } from './IconList';
import { LargeInput } from './Input';
export interface FiltersEditorProps {
filters: IconListFilters;
+ // eslint-disable-next-line no-unused-vars
onChange: (filters: IconListFilters) => void;
}
-
export function FiltersEditor({ filters, onChange }: FiltersEditorProps) {
const [, startTransition] = (React as any).useTransition();
const [search, setSearch] = React.useState(filters.search);
-
- // Keep track if the user hits tab before scrolling, so we can scroll the search
- // field to the top of the page automatically.
- const didScrollRef = React.useRef(false);
-
- React.useEffect(() => {
- const scrollEvent = () => {
- didScrollRef.current = true;
- window.removeEventListener('scroll', scrollEvent);
- };
-
- window.addEventListener('scroll', scrollEvent);
-
- return () => {
- window.removeEventListener('scroll', scrollEvent);
- };
- }, []);
-
React.useEffect(() => {
setSearch(filters.search);
}, [filters]);
@@ -43,19 +25,10 @@ export function FiltersEditor({ filters, onChange }: FiltersEditorProps) {
return (
{
- if (!didScrollRef.current) {
- e.target.scrollIntoView({
- block: 'start',
- behavior: 'auto',
- });
- }
- }}
+ type={'search'}
+ autoCapitalize={'none'}
onChange={(e) => {
const value = e.target.value;
setSearch(value);
diff --git a/iconoir.com/components/Footer.tsx b/iconoir.com/components/Footer.tsx
index 11fa36d9..ae78a448 100644
--- a/iconoir.com/components/Footer.tsx
+++ b/iconoir.com/components/Footer.tsx
@@ -1,165 +1,42 @@
import { PeaceHand } from 'iconoir-react';
+import React from 'react';
import styled from 'styled-components';
-import {
- GITHUB_LINK,
- ISSUE_LINK,
- LICENSE_LINK,
- PRIVACY_LINK,
- SUPPORT_LINK,
-} from '../lib/constants';
+import { LICENSE_LINK } from './constants';
import { Logo, LogoContainer, LogoIcon } from './Header';
-import { Text13, Text17 } from './Typography';
-
-const Container = styled.div`
- display: block;
- margin-top: 110px;
- padding-top: 30px;
- margin-top: 100px;
- padding: 84px 12%;
- background-color: var(--g7);
- align-items: center;
- > :not(:last-child) {
- margin-right: 50px;
- }
-`;
-
-const FooterEnd = styled.div`
- border-top: 1px solid var(--g5);
- padding-top: 20px;
- margin-top: 74px;
- width: 100%;
- display: flex;
- justify-content: space-between;
-`;
-
-const FooterCategories = styled.div`
- width: 100%;
- margin-top: 54px;
- display: flex;
-`;
-
-const FooterCategoryContainer = styled.div`
- width: 28%;
- margin-right: 20px;
-`;
-
-const FooterCategoryTitle = styled(Text17)`
- &&& {
- margin-bottom: 24px;
- font-weight: 600;
- display: block;
- color: var(--g0);
- }
-`;
-
-const FooterCategoryLinks = styled.div``;
-
-const FooterCategoryLink = styled.a`
- display: block;
- font-size: 17px;
- color: var(--g1);
- width: fit-content;
- margin-bottom: 12px;
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- color: var(--g0);
- }
-`;
-
-interface FooterCategoryProps {
- category: string;
- links: { name: string; url: string }[];
-}
-
-function FooterCategory({ category, links }: FooterCategoryProps) {
- return (
-
- {category}
-
- {links.map((link) => (
-
- {link.name}
-
- ))}
-
-
- );
-}
+import { NavigationItemContainer } from './NavigationItem';
export function Footer() {
- const year = new Date().getFullYear();
-
return (
-
-
-
-
-
- Parts of this content are ©2020-
- {year}
- {' '}
- by individual Iconoir
- contributors. Content available under a
- {' '}
-
- MIT License
-
- .
-
-
-
- Privacy
-
-
-
+
+ License
+
);
}
+
+const Container = styled.div`
+ margin-top: 100px;
+ padding-top: 30px;
+ border-top: solid 2px var(--light-gray);
+ display: flex;
+ align-items: center;
+ > :not(:last-child) {
+ margin-right: 50px;
+ }
+`;
+
+const FooterNavigationItem = styled(NavigationItemContainer)`
+ color: var(--black);
+`;
diff --git a/iconoir.com/components/GA.tsx b/iconoir.com/components/GA.tsx
index 19b71f77..cfc9800a 100644
--- a/iconoir.com/components/GA.tsx
+++ b/iconoir.com/components/GA.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
import Script from 'next/script';
export function GA() {
@@ -5,9 +6,9 @@ export function GA() {
<>
-
-
-
-
-
-
-
- 
+
+ 
+ 
+ 
+