diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index 982b2fa1..00000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,14 +0,0 @@
-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/FUNDING.yml b/.github/FUNDING.yml
similarity index 100%
rename from FUNDING.yml
rename to .github/FUNDING.yml
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index dde60db8..9b762984 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -13,22 +13,21 @@ 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:
-* Bits:
+- Version:
+- Are you running from source/main:
+- Are you using a released build:
+- Operating system:
## 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 b8dfcb8b..c9827fd6 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
new file mode 100644
index 00000000..5e4e226f
--- /dev/null
+++ b/.github/actions/setup/action.yml
@@ -0,0 +1,36 @@
+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 74b2230b..6b7174ac 100644
--- a/.github/workflows/build.yaml
+++ b/.github/workflows/build.yaml
@@ -9,23 +9,19 @@ jobs:
build:
name: Build
runs-on: ubuntu-latest
+ # Skip job on forks
+ if: github.repository_owner == 'iconoir-icons'
steps:
- - 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
+ - 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
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
new file mode 100644
index 00000000..1e65815a
--- /dev/null
+++ b/.github/workflows/ci.yaml
@@ -0,0 +1,28 @@
+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 0e9a4d1c..ac08a105 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -9,48 +9,56 @@ jobs:
release:
name: Release
runs-on: ubuntu-latest
+ permissions:
+ contents: write
+ id-token: write
steps:
- - uses: actions/checkout@v2
+ - name: Checkout repository
+ uses: actions/checkout@v4
with:
- ref: main # We have to checkout main or PNPM fails. Tag should be on main anyway.
- - uses: actions/cache@v2
+ # We have to checkout main or PNPM fails. Tag should be on main anyway.
+ ref: main
+
+ - name: Setup
+ uses: ./.github/actions/setup
with:
- path: ~/.pnpm-store
- key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
- restore-keys: |
- ${{ runner.os }}-
- - uses: actions/setup-node@v2
+ node-registry: https://registry.npmjs.org
+
+ - name: Generate changelog file
+ uses: rhysd/changelog-from-release/action@v3
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:
- file: packages/iconoir-flutter/CHANGELOG.md
github_token: ${{ secrets.GITHUB_TOKEN }}
+ file: packages/iconoir-flutter/CHANGELOG.md
commit: false
- - run: pnpm run build
- - run: pnpm run prepublish-all
+ args: -d=false
+
+ - name: Build
+ run: pnpm run build
+
+ - name: Prepare packages
+ run: pnpm run prepublish-all
env:
TAG_NAME: ${{ github.ref_name }}
- - uses: stefanzweifel/git-auto-commit-action@v4
+
+ - name: Commit release
+ uses: stefanzweifel/git-auto-commit-action@v6
with:
commit_message: Release Version ${{ github.ref_name }}
branch: main
- - 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
+
+ - 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
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- - 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
+ 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
diff --git a/.github/workflows/website.yaml b/.github/workflows/website.yaml
index 7606f243..83178de5 100644
--- a/.github/workflows/website.yaml
+++ b/.github/workflows/website.yaml
@@ -1,62 +1,59 @@
name: Website
+on:
+ workflow_dispatch:
+ workflow_run:
+ workflows:
+ - Release
+ types:
+ - completed
+
permissions:
+ actions: read
contents: read
pages: write
id-token: write
concurrency:
- group: pages
+ group: ${{ github.workflow }}
cancel-in-progress: true
-on:
- workflow_dispatch: {}
- push:
- tags:
- - 'v*'
-
jobs:
build:
+ name: Build
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v2
- with:
- 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: Checkout repository
+ uses: actions/checkout@v4
+
+ - name: Setup
+ uses: ./.github/actions/setup
+
- name: Build
- run: ./node_modules/.bin/next build
+ run: pnpm run build react
+
+ - name: Build website
+ run: pnpm run 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
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+ - name: Setup GitHub Pages
+ uses: actions/configure-pages@v5
+
- name: Upload artifact
- uses: actions/upload-pages-artifact@v1
+ uses: actions/upload-pages-artifact@v3
with:
- path: './iconoir.com/out'
+ 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@v1
+ uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
index b9470778..2c60c589 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,10 @@
+.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
new file mode 100644
index 00000000..2bd5a0a9
--- /dev/null
+++ b/.node-version
@@ -0,0 +1 @@
+22
diff --git a/.npmrc b/.npmrc
deleted file mode 100644
index 319e41e6..00000000
--- a/.npmrc
+++ /dev/null
@@ -1 +0,0 @@
-strict-peer-dependencies=false
diff --git a/.prettierrc.json b/.prettierrc.json
deleted file mode 100644
index 544138be..00000000
--- a/.prettierrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
- "singleQuote": true
-}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000..940260d8
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+ "recommendations": ["dbaeumer.vscode-eslint"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..9f2f4482
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,51 @@
+{
+ // 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 88ec62b4..19941254 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/NAMING_CONVENTION.md b/NAMING_CONVENTION.md
new file mode 100644
index 00000000..a4e2a320
--- /dev/null
+++ b/NAMING_CONVENTION.md
@@ -0,0 +1,74 @@
+# 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 d81d85c6..66dd2b33 100644
--- a/README.md
+++ b/README.md
@@ -1,69 +1,70 @@
-
-
-
- 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.
-
+[](https://github.com/iconoir-icons/iconoir/releases)
+[](https://github.com/iconoir-icons/iconoir)
+[](https://github.com/iconoir-icons/iconoir/blob/main/LICENSE)
+[](https://discord.gg/txXcKCAmKW)
-
+## 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
new file mode 100644
index 00000000..a9fd8782
--- /dev/null
+++ b/bin/build/worker.js
@@ -0,0 +1,7 @@
+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
deleted file mode 100644
index 296a8ed4..00000000
--- a/bin/header.css
+++ /dev/null
@@ -1,21 +0,0 @@
-/*!
- * 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 9d94f682..da7dcae6 100644
--- a/bin/prepublish.js
+++ b/bin/prepublish.js
@@ -1,28 +1,34 @@
-import { updateYamlKey } from '@atomist/yaml-updater';
-import fs from 'fs';
-import path from 'path';
-import semver from 'semver';
+/* eslint-disable no-console */
-const PACKAGE_BASE = '';
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
+import { updateYamlKey } from '@atomist/yaml-updater';
+import semver from 'semver';
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');
}
@@ -33,13 +39,8 @@ 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
deleted file mode 100644
index 2ad4c47f..00000000
--- a/bin/templates/__svgfilename__.dart
+++ /dev/null
@@ -1,20 +0,0 @@
-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
deleted file mode 100644
index c72f8ac0..00000000
--- a/bin/templates/icon-template.cjs
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index 6f3b6685..00000000
--- a/bin/templates/index-template.cjs
+++ /dev/null
@@ -1,15 +0,0 @@
-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
deleted file mode 100644
index b6dfb914..00000000
--- a/constants.js
+++ /dev/null
@@ -1,12 +0,0 @@
-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 92407d27..3d2a12ca 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
new file mode 100644
index 00000000..275909b6
--- /dev/null
+++ b/examples/next/next.config.ts
@@ -0,0 +1,9 @@
+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
new file mode 100644
index 00000000..847d7662
--- /dev/null
+++ b/examples/next/package.json
@@ -0,0 +1,22 @@
+{
+ "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
new file mode 100644
index 00000000..5d306ce7
--- /dev/null
+++ b/examples/next/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "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
new file mode 100644
index 00000000..d16e1efb
--- /dev/null
+++ b/examples/react-native/.gitignore
@@ -0,0 +1,36 @@
+# 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
new file mode 100644
index 00000000..bda4a224
--- /dev/null
+++ b/examples/react-native/App.tsx
@@ -0,0 +1,21 @@
+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
new file mode 100644
index 00000000..173213a4
--- /dev/null
+++ b/examples/react-native/app.json
@@ -0,0 +1,21 @@
+{
+ "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
new file mode 100644
index 00000000..1d6e981e
--- /dev/null
+++ b/examples/react-native/index.ts
@@ -0,0 +1,8 @@
+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
new file mode 100644
index 00000000..6ad921f6
--- /dev/null
+++ b/examples/react-native/metro.config.js
@@ -0,0 +1,31 @@
+/*
+ * 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
new file mode 100644
index 00000000..7336bc0e
--- /dev/null
+++ b/examples/react-native/package.json
@@ -0,0 +1,30 @@
+{
+ "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
new file mode 100644
index 00000000..b9567f60
--- /dev/null
+++ b/examples/react-native/tsconfig.json
@@ -0,0 +1,6 @@
+{
+ "extends": "expo/tsconfig.base",
+ "compilerOptions": {
+ "strict": true
+ }
+}
diff --git a/examples/vue/.gitignore b/examples/vue/.gitignore
new file mode 100644
index 00000000..8ee54e8d
--- /dev/null
+++ b/examples/vue/.gitignore
@@ -0,0 +1,30 @@
+# 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
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/examples/vue/env.d.ts
@@ -0,0 +1 @@
+/// Iconoir
+
+
+
+
+
+
diff --git a/examples/vue/package.json b/examples/vue/package.json
new file mode 100644
index 00000000..bdc94cf5
--- /dev/null
+++ b/examples/vue/package.json
@@ -0,0 +1,27 @@
+{
+ "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
new file mode 100644
index 00000000..448ab040
--- /dev/null
+++ b/examples/vue/src/App.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
diff --git a/examples/vue/src/main.ts b/examples/vue/src/main.ts
new file mode 100644
index 00000000..684d0421
--- /dev/null
+++ b/examples/vue/src/main.ts
@@ -0,0 +1,4 @@
+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
new file mode 100644
index 00000000..95588cd0
--- /dev/null
+++ b/examples/vue/tsconfig.app.json
@@ -0,0 +1,13 @@
+{
+ "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
new file mode 100644
index 00000000..d85c910c
--- /dev/null
+++ b/examples/vue/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "references": [
+ {
+ "path": "./tsconfig.node.json"
+ },
+ {
+ "path": "./tsconfig.app.json"
+ }
+ ],
+ "files": []
+}
diff --git a/examples/vue/tsconfig.node.json b/examples/vue/tsconfig.node.json
new file mode 100644
index 00000000..a129c39d
--- /dev/null
+++ b/examples/vue/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+ "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
new file mode 100644
index 00000000..cadb514e
--- /dev/null
+++ b/examples/vue/vite.config.ts
@@ -0,0 +1,18 @@
+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
deleted file mode 100755
index 92ada67c..00000000
--- a/iconoir.com/.eslintrc.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "extends": "next/core-web-vitals",
- "rules": {
- "react/no-unescaped-entities": ["off"]
- }
-}
diff --git a/iconoir.com/.gitignore b/iconoir.com/.gitignore
old mode 100755
new mode 100644
diff --git a/iconoir.com/README.md b/iconoir.com/README.md
deleted file mode 100755
index c87e0421..00000000
--- a/iconoir.com/README.md
+++ /dev/null
@@ -1,34 +0,0 @@
-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
new file mode 100644
index 00000000..485727ef
--- /dev/null
+++ b/iconoir.com/components/Ad.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const AdContainer = styled.div`
+ #carbonads {
+ margin: 24px 0 0 0;
+ a {
+ text-decoration: none;
+ }
+ .carbon-wrap {
+ display: flex;
+ align-items: flex-start;
+ > :first-child {
+ margin-right: 12px;
+ }
+ & > a > img {
+ width: 100px;
+ height: 74px;
+ filter: grayscale(100%);
+ }
+ }
+ .carbon-text {
+ color: var(--black-80);
+ font-size: 14px;
+ }
+ .carbon-poweredby {
+ text-align: center;
+ font-size: 12px;
+ color: var(--black-40);
+ }
+ }
+`;
+
+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);
+
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: none;
- ${media.lg} {
+ &&& {
display: block;
+ margin-top: 5px;
+ text-align: center;
+ ${media.lg} {
+ display: none;
+ }
}
`;
+
+const DesktopHeader = styled(Text14)`
+ &&& {
+ display: none;
+ ${media.lg} {
+ display: block;
+ }
+ }
+`;
+
const AvailableForAnimation = keyframes`
5% {
transform: translateX(0);
@@ -99,26 +48,30 @@ 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: 120px auto;
+ margin: 80px 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 ? '&' : '&.noop')} {
- animation: ${AvailableForAnimation} 40s cubic-bezier(0.37, 0, 0.63, 1)
- infinite;
- }
+ --content-width: ${(props) => props.$contentWidth}px;
+ ${(props) =>
+ props.$contentWidth
+ && css`
+ animation: ${AvailableForAnimation} 40s cubic-bezier(0.37, 0, 0.63, 1)
+ infinite;
+ `}
> :not(:last-child) {
margin-right: 30px;
}
@@ -129,14 +82,124 @@ const AvailableForContainer = styled.div<{ contentWidth: number }>`
}
${media.md} {
> :not(:last-child) {
- margin-right: 60px;
+ margin-right: 40px;
}
}
`;
+
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 4368fae1..c357cd41 100644
--- a/iconoir.com/components/Button.tsx
+++ b/iconoir.com/components/Button.tsx
@@ -12,55 +12,74 @@ export const ResetButton = styled.button`
`;
export const LargeButton = styled(ResetButton)`
- 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;
- }
- * {
+ &&& {
+ 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;
font-weight: 700;
- }
- &::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;
+ 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;
+ }
}
`;
-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);
+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);
}
`;
diff --git a/iconoir.com/components/CategoryRow.tsx b/iconoir.com/components/CategoryRow.tsx
index 249e2cde..7fa4c85b 100644
--- a/iconoir.com/components/CategoryRow.tsx
+++ b/iconoir.com/components/CategoryRow.tsx
@@ -1,27 +1,7 @@
-import React from 'react';
import styled from 'styled-components';
-import { media } from './responsive';
+import { media } from '../lib/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;
@@ -33,6 +13,7 @@ const InnerContainer = styled.div`
margin-right: 10px;
}
`;
+
const Container = styled.div`
display: flex;
align-items: flex-end;
@@ -42,12 +23,42 @@ const Container = styled.div`
padding-bottom: 40px;
}
`;
+
const Title = styled(Text15)`
- font-weight: 700;
- color: var(--black);
+ &&& {
+ font-weight: 700;
+ color: var(--g0);
+ background-color: var(--g6);
+ border-radius: 8px;
+ padding: 6px 10px;
+ }
`;
+
const Separator = styled.div`
height: 1px;
flex: 1;
- background: var(--light-gray);
+ background: var(--g6);
`;
+
+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 063f9459..886bd964 100644
--- a/iconoir.com/components/ChangelogEntry.tsx
+++ b/iconoir.com/components/ChangelogEntry.tsx
@@ -1,70 +1,17 @@
+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 { Code, CopyButton, Text15, Text18 } from './Typography';
-import moment from 'moment';
-import { MDXRemoteSerializeResult } from 'next-mdx-remote';
+import { media } from '../lib/responsive';
+import { CopyButton } from './Button';
import { MDXRemote } from './MDXRemote';
-import { FILE_PREFIX } from './constants';
-import { media } from './responsive';
+import { Code, Text15, Text18 } from './Typography';
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 !important;
+ margin: 40px 0;
display: flex;
align-items: stretch;
flex-direction: column;
@@ -72,9 +19,10 @@ const Container = styled.div`
${media.lg} {
flex-direction: row;
align-items: flex-start;
- margin: 24px 0 !important;
+ margin: 24px 0;
}
`;
+
const ContainerLeft = styled.div`
display: flex;
align-items: flex-start;
@@ -84,46 +32,115 @@ 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;
- 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;
+
+const EntryBody = styled(Code)<{ $expanded?: boolean }>`
+ &&& {
+ flex: 1;
margin: 0;
- padding: 0;
- li {
- margin-bottom: 8px;
+ 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;
}
}
- 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 da9858a6..ade4982d 100644
--- a/iconoir.com/components/CurrentVersion.tsx
+++ b/iconoir.com/components/CurrentVersion.tsx
@@ -1,29 +1,35 @@
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(--black);
+&&& {
+ color: var(--g1);
font-weight: 700;
- background: var(--pink);
+ background: var(--g5);
line-height: 1;
padding: 7px 16px;
border-radius: 200px;
display: block;
- text-decoration: none !important;
+ text-decoration: none;
+ transition:
+ color 0.1s linear,
+ background 0.1s linear;
+ &:hover {
+ background: var(--black);
+ color: var(--white);
+ }
+}
`;
+
+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 836a9ff7..06bb6af5 100644
--- a/iconoir.com/components/CustomizationEditor.tsx
+++ b/iconoir.com/components/CustomizationEditor.tsx
@@ -1,16 +1,62 @@
+import type { IconListCustomizations } from './IconList';
import React from 'react';
-import { DEFAULT_CUSTOMIZATIONS, IconListCustomizations } from './IconList';
import styled from 'styled-components';
-import { Text13, Text18 } from './Typography';
-import { Button } from './Button';
-import { ColorInput } from './Input';
+import { media } from '../lib/responsive';
+import { DEFAULT_CUSTOMIZATIONS } from './IconList';
+import { ColorButton, 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,
@@ -18,9 +64,11 @@ 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);
@@ -38,65 +86,55 @@ 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 74c24004..41efcc3a 100644
--- a/iconoir.com/components/DocumentationNavigation.tsx
+++ b/iconoir.com/components/DocumentationNavigation.tsx
@@ -1,95 +1,15 @@
-import React from 'react';
-import { DocumentationItem } from '../pages/docs/[...slug]';
-import styled from 'styled-components';
+import type { DocumentationItem } from '../pages/docs/[...slug]';
+import { NavArrowUp } from 'iconoir-react';
import Link from 'next/link';
import { useRouter } from 'next/router';
-import { media } from './responsive';
-import { NavArrowUp } from 'iconoir-react';
+import React from 'react';
+import styled from 'styled-components';
+import { media } from '../lib/responsive';
-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 }>`
+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;
@@ -100,19 +20,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;
- text-transform: uppercase;
- font-size: 12px;
+ font-size: 15px;
line-height: 19px;
- color: var(--black);
- letter-spacing: 0.12em;
+ color: var(--g0);
font-weight: 700;
display: flex;
align-items: baseline;
@@ -126,45 +46,144 @@ const HeaderItem = styled.div`
}
}
`;
-const NavigationItem = styled.div<{ active?: boolean }>`
- padding: 12px 45px 12px 75px;
- transition: background 0.1s linear, color 0.1s linear;
- font-weight: 500;
+
+const NavigationItem = styled.div<{ $active?: boolean }>`
+ padding: 12px 12px 12px 75px;
+ transition:
+ background 0.1s linear,
+ color 0.1s linear;
font-size: 16px;
line-height: 14.5px;
letter-spacing: -0.02em;
- color: var(--black-60);
+ color: var(--g1);
display: flex;
align-items: center;
text-decoration: none;
span {
- font-weight: 500;
+ font-weight: 400;
}
> :not(:last-child) {
margin-right: 14px;
}
&:hover,
- ${(props) => (props.active ? '&' : '&.noop')} {
- background: var(--light-gray);
- color: var(--black);
+ ${(props) => (props.$active ? '&' : '&.noop')} {
+ color: var(--g0);
+ text-decoration: underline;
}
- ${(props) => (props.active ? 'span' : '&.noop')} {
- font-weight: 700;
+ ${(props) => (props.$active ? 'span' : '&.noop')} {
+ font-weight: 500;
}
${media.lg} {
- padding: 12px 45px 12px 65px;
+ padding: 12px 12px 12px 65px;
}
`;
+
const NavigationItemLabel = styled.span`
display: flex;
align-items: center;
justify-content: center;
- padding: 0 4px;
+ padding: 2px 6px;
+ border-radius: 4px;
font-size: 11px;
line-height: 17.6px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
- color: var(--white);
- background: var(--black);
+ color: var(--g1);
+ background: var(--g5);
`;
+
+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
new file mode 100644
index 00000000..8f34162b
--- /dev/null
+++ b/iconoir.com/components/DonationPopup.tsx
@@ -0,0 +1,96 @@
+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 12b8972a..01966ee5 100644
--- a/iconoir.com/components/Explore.tsx
+++ b/iconoir.com/components/Explore.tsx
@@ -1,22 +1,72 @@
+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 { CustomizationEditor } from './CustomizationEditor';
import { FiltersEditor } from './FiltersEditor';
-import { Icon, IconList, IconListFilters } from './IconList';
-import { media } from './responsive';
+import { IconList } from './IconList';
+import { Streamline } from './Streamline';
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 54ca3b3d..05b3714f 100644
--- a/iconoir.com/components/FiltersEditor.tsx
+++ b/iconoir.com/components/FiltersEditor.tsx
@@ -1,15 +1,33 @@
+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]);
@@ -25,10 +43,19 @@ export function FiltersEditor({ filters, onChange }: FiltersEditorProps) {
return (
{
+ if (!didScrollRef.current) {
+ e.target.scrollIntoView({
+ block: 'start',
+ behavior: 'auto',
+ });
+ }
+ }}
onChange={(e) => {
const value = e.target.value;
setSearch(value);
diff --git a/iconoir.com/components/Footer.tsx b/iconoir.com/components/Footer.tsx
index ae78a448..11fa36d9 100644
--- a/iconoir.com/components/Footer.tsx
+++ b/iconoir.com/components/Footer.tsx
@@ -1,42 +1,165 @@
import { PeaceHand } from 'iconoir-react';
-import React from 'react';
import styled from 'styled-components';
-import { LICENSE_LINK } from './constants';
+import {
+ GITHUB_LINK,
+ ISSUE_LINK,
+ LICENSE_LINK,
+ PRIVACY_LINK,
+ SUPPORT_LINK,
+} from '../lib/constants';
import { Logo, LogoContainer, LogoIcon } from './Header';
-import { NavigationItemContainer } from './NavigationItem';
-
-export function Footer() {
- return (
-
-
-
-
-
-
- License
-
-
- );
-}
+import { Text13, Text17 } from './Typography';
const Container = styled.div`
- margin-top: 100px;
+ display: block;
+ margin-top: 110px;
padding-top: 30px;
- border-top: solid 2px var(--light-gray);
- display: flex;
+ margin-top: 100px;
+ padding: 84px 12%;
+ background-color: var(--g7);
align-items: center;
> :not(:last-child) {
margin-right: 50px;
}
`;
-const FooterNavigationItem = styled(NavigationItemContainer)`
- color: var(--black);
+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}
+
+ ))}
+
+
+ );
+}
+
+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
+
+
+
+
+ );
+}
diff --git a/iconoir.com/components/GA.tsx b/iconoir.com/components/GA.tsx
index cfc9800a..19b71f77 100644
--- a/iconoir.com/components/GA.tsx
+++ b/iconoir.com/components/GA.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
import Script from 'next/script';
export function GA() {
@@ -6,9 +5,9 @@ export function GA() {
<>
-
+
+
+
+
+
+
+ 
-
- 
- 
- 
-