diff --git a/.fantasticonrc.js b/.fantasticonrc.js deleted file mode 100644 index f4dc5ffb..00000000 --- a/.fantasticonrc.js +++ /dev/null @@ -1,26 +0,0 @@ -module.exports = { - inputDir: './icons', - outputDir: './dist', - fontTypes: ['ttf', 'woff', 'woff2', 'eot'], - assetTypes: ['css', 'scss', 'html'], - fontsUrl: '.', - name: 'Valkyrie', - prefix: 'vi', - selector: '.vi', - normalize: true, - descent: 26, - templates: { - html: './templates/html.hbs', - css: './templates/css.hbs', - scss: './templates/css.hbs' - }, - pathOptions: { - eot: './dist/fonts/Valkyrie.eot', - ttf: './dist/fonts/Valkyrie.ttf', - woff: './dist/fonts/Valkyrie.woff', - woff2: './dist/fonts/Valkyrie.woff2', - css: './dist/fonts/Valkyrie.css', - scss: './dist/fonts/Valkyrie.scss', - html: './docs/index.html' - } -}; \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/BugReport.yml b/.github/ISSUE_TEMPLATE/BugReport.yml index 28cfd83f..1d4b5832 100644 --- a/.github/ISSUE_TEMPLATE/BugReport.yml +++ b/.github/ISSUE_TEMPLATE/BugReport.yml @@ -1,64 +1,64 @@ -name: Bug Report -description: When something has gone wrong. -title: "[Bug] " -labels: [bug, needs confirmation] -assignees: - - studio384 -body: - - type: textarea - id: current - attributes: - label: Current behavior - description: Describe the current faulty beharior of Valkyrie. - validations: - required: true - - type: textarea - id: expected - attributes: - label: Expected behavior - description: Describe the expected beharior of Valkyrie. - validations: - required: true - - type: textarea - id: reproduction - attributes: - label: Reproduction steps - description: Describe the steps you took to recreate the bug. - validations: - required: true - - type: textarea - id: screenshots - attributes: - label: Add screenshots to showcase the bug. - description: If the bug is visual, showcase it with a screenshot or more. - - type: textarea - id: context - attributes: - label: Additional context - description: Add any extra information you'd like to add. - - - type: checkboxes - id: implementations - attributes: - label: Which parts of Valkyrie are affected? - options: - - label: Web fonts and CSS - required: false - - label: TypeScript definitions - required: false - - label: SVG icons - required: false - - label: React component - required: false - - - type: checkboxes - id: checklist - attributes: - label: Bug report checklist - options: - - label: This bug occures in the latest version of Valkyrie. - required: true - - label: The reproduction is included and is the minimum test case to recreate the faulty behavior. - required: true - - label: I have [searched the issues](https://github.com/sippy-platform/valkyrie/issues) for any possible duplications of this bug report. - required: true +name: Bug Report +description: When something has gone wrong. +title: "[Bug] " +labels: [bug, needs confirmation] +assignees: + - studio384 +body: + - type: textarea + id: current + attributes: + label: Current behavior + description: Describe the current faulty beharior of Amicons. + validations: + required: true + - type: textarea + id: expected + attributes: + label: Expected behavior + description: Describe the expected beharior of Amicons. + validations: + required: true + - type: textarea + id: reproduction + attributes: + label: Reproduction steps + description: Describe the steps you took to recreate the bug. + validations: + required: true + - type: textarea + id: screenshots + attributes: + label: Add screenshots to showcase the bug. + description: If the bug is visual, showcase it with a screenshot or more. + - type: textarea + id: context + attributes: + label: Additional context + description: Add any extra information you'd like to add. + + - type: checkboxes + id: implementations + attributes: + label: Which parts of Amicons are affected? + options: + - label: Web fonts and CSS + required: false + - label: TypeScript definitions + required: false + - label: SVG icons + required: false + - label: React component + required: false + + - type: checkboxes + id: checklist + attributes: + label: Bug report checklist + options: + - label: This bug occures in the latest version of Amicons. + required: true + - label: The reproduction is included and is the minimum test case to recreate the faulty behavior. + required: true + - label: I have [searched the issues](https://github.com/studio384/amicons/issues) for any possible duplications of this bug report. + required: true diff --git a/.github/ISSUE_TEMPLATE/FeatureRequest.yml b/.github/ISSUE_TEMPLATE/FeatureRequest.yml index d78fc51d..11591ff6 100644 --- a/.github/ISSUE_TEMPLATE/FeatureRequest.yml +++ b/.github/ISSUE_TEMPLATE/FeatureRequest.yml @@ -1,36 +1,36 @@ -name: Feature Request -description: Suggest a new idea for Valkyrie. -title: "[Feature] " -labels: [feature] -assignees: - - studio384 -body: - - type: textarea - id: why - attributes: - label: What problem or need will this feature solve? - description: Describe why you need this feature. - validations: - required: true - - type: textarea - id: how - attributes: - label: How would this feature work? - description: Describe how this feature reqeust fixes the problem you have. - validations: - required: true - - type: textarea - id: context - attributes: - label: Additional context - description: Add any extra information you'd like to add. - - - type: checkboxes - id: checklist - attributes: - label: Check all that apply. - options: - - label: This is a single feature. - required: true - - label: I have [searched the issues](https://github.com/sippy-platform/valkyrie/issues) for any possible duplications of this feature request. - required: true +name: Feature Request +description: Suggest a new idea for Amicons. +title: "[Feature] " +labels: [feature] +assignees: + - studio384 +body: + - type: textarea + id: why + attributes: + label: What problem or need will this feature solve? + description: Describe why you need this feature. + validations: + required: true + - type: textarea + id: how + attributes: + label: How would this feature work? + description: Describe how this feature reqeust fixes the problem you have. + validations: + required: true + - type: textarea + id: context + attributes: + label: Additional context + description: Add any extra information you'd like to add. + + - type: checkboxes + id: checklist + attributes: + label: Check all that apply. + options: + - label: This is a single feature. + required: true + - label: I have [searched the issues](https://github.com/studio384/amicons/issues) for any possible duplications of this feature request. + required: true diff --git a/.github/ISSUE_TEMPLATE/IconRequest.yml b/.github/ISSUE_TEMPLATE/IconRequest.yml index 5266796f..134f8212 100644 --- a/.github/ISSUE_TEMPLATE/IconRequest.yml +++ b/.github/ISSUE_TEMPLATE/IconRequest.yml @@ -1,38 +1,38 @@ -name: Icon Request -description: Request a new icon to be added to the set. -title: "[Icon] Add vi-" -labels: [icon, external] -assignees: - - studio384 -body: - - type: input - id: name - attributes: - label: Description - description: Describe the icon you want to see added. - validations: - required: true - - type: textarea - id: reason - attributes: - label: How would it be used? - description: Describe under what situations this icon would be useful. - validations: - required: true - - type: textarea - id: example - attributes: - label: Example icon - description: Add an image below as an example for a similar icon if you have any. - - - type: checkboxes - id: checklist - attributes: - label: Check all that apply. - options: - - label: This is a single icon or part of an expected pair (e.g. `eye` and `eye-slashed`). - required: true - - label: I have [searched the issues](https://github.com/sippy-platform/valkyrie/issues) for any possible duplications of this icon request. - required: true - - label: An example image is included if available. - required: false +name: Icon Request +description: Request a new icon to be added to the set. +title: "[Icon] Add ai-" +labels: [icon, external] +assignees: + - studio384 +body: + - type: input + id: name + attributes: + label: Description + description: Describe the icon you want to see added. + validations: + required: true + - type: textarea + id: reason + attributes: + label: How would it be used? + description: Describe under what situations this icon would be useful. + validations: + required: true + - type: textarea + id: example + attributes: + label: Example icon + description: Add an image below as an example for a similar icon if you have any. + + - type: checkboxes + id: checklist + attributes: + label: Check all that apply. + options: + - label: This is a single icon or part of an expected pair (e.g. `eye` and `eye-slashed`). + required: true + - label: I have [searched the issues](https://github.com/studio384/amicons/issues) for any possible duplications of this icon request. + required: true + - label: An example image is included if available. + required: false diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 00000000..2a50cb50 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,81 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: ["1.0"] + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + build: + runs-on: ubuntu-latest + defaults: + run: + working-directory: amicons + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Set up Node + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: "npm" + cache-dependency-path: amicons/package-lock.json + - name: Install dependencies + run: npm install + - name: Production build + run: npm run prod + - name: Upload artifact + uses: actions/upload-artifact@v4 + with: + name: amicons + path: | + amicons/dist + amicons/node_modules + + deploy: + needs: build + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + defaults: + run: + working-directory: docs + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Set up Node + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: "npm" + cache-dependency-path: docs/package-lock.json + - name: Download artifact + id: download + uses: actions/download-artifact@v4 + with: + name: amicons + path: amicons + - name: Install dependencies + if: steps.download.outcome == 'success' + run: npm install + - name: Build + run: npm run build + - name: Setup Pages + uses: actions/configure-pages@v4 + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: docs/dist + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore deleted file mode 100644 index b2d59d1f..00000000 --- a/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -/node_modules -/dist \ No newline at end of file diff --git a/.svg-to-tsrc b/.svg-to-tsrc deleted file mode 100644 index 197894f5..00000000 --- a/.svg-to-tsrc +++ /dev/null @@ -1,11 +0,0 @@ -{ - "srcFiles": ["./icons/**/*.svg"], - "outputDirectory": "./src", - "interfaceName": "ValkyrieIcon", - "typeName": "Valkyrie", - "prefix": "vi", - "fileName": "Valkyrie", - "additionalModelFile": "./src", - "compileSources": true, - "completeIconSetName": "valkyrieSet" -} \ No newline at end of file diff --git a/README.md b/README.md deleted file mode 100644 index 15840f00..00000000 --- a/README.md +++ /dev/null @@ -1,20 +0,0 @@ -# Valkyrie -An open source icon set for the next generation of Sippy. - -# Usage -Install Valkyrie with the following npm command. - -``` -npm install @sippy-platform/valkyrie -``` - -Valkyrie includes a number of ways to use it. Our package will include the individual SVG files, a React-component and JavaScript implementation with TypeScript definitions, as well as an old-school webfont. - -# 216 icons -[Available on Figma](https://www.figma.com/file/jeP1aSRulegRxHDegrrmWc/Valkyrie?node-id=1%3A11358) - -# About -Valkyrie is an iconset designed for use in the Mellow Design Language. Our goal is to provide a highly-optimized set of icons that are custom made for Sippy and any future environments required. As such, Valkyrie will mostly include iconography related to basic UI (arrows, menu icons, etc.) and phone iconography (voicemail, call directions, etc.). - -# License -AGPL v3 diff --git a/amicons-docs/.gitignore b/amicons-docs/.gitignore new file mode 100644 index 00000000..5ef6a520 --- /dev/null +++ b/amicons-docs/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/amicons-docs/README.md b/amicons-docs/README.md new file mode 100644 index 00000000..e215bc4c --- /dev/null +++ b/amicons-docs/README.md @@ -0,0 +1,36 @@ +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## 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/app/building-your-application/deploying) for more details. diff --git a/amicons-docs/app/favicon.ico b/amicons-docs/app/favicon.ico new file mode 100644 index 00000000..718d6fea Binary files /dev/null and b/amicons-docs/app/favicon.ico differ diff --git a/amicons-docs/app/globals.css b/amicons-docs/app/globals.css new file mode 100644 index 00000000..6e3d615a --- /dev/null +++ b/amicons-docs/app/globals.css @@ -0,0 +1,23 @@ +@import "tailwindcss"; + +@theme { + --color-background: var(--background); + --color-foreground: var(--foreground); +} + +:root { + --background: #ffffff; + --foreground: #171717; +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #0a0a0a; + --foreground: #ededed; + } +} + +body { + color: var(--foreground); + background: var(--background); +} diff --git a/amicons-docs/app/icons/page.tsx b/amicons-docs/app/icons/page.tsx new file mode 100644 index 00000000..b12a2680 --- /dev/null +++ b/amicons-docs/app/icons/page.tsx @@ -0,0 +1,7 @@ +export default function Icons() { + return ( +
All the icons
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+Welcome to the next gen docs
+beat property gives you a basic beat animation.
+ fade property gives you a basic fade animation.
+ bounce prop to our React component.
+ >,
+ <>
+ We've removed the dependency on @emotion/css!
+ >
+ ]}
+ fixed={[<>Fixes the SVG and export for fingerprint, record-stop, safari, signal-strong, and triangle-exclamation containing the icon twice.>]}
+ />
+ @studio384/amaranth to @studio384/amicons.
+ >
+ ]}
+ newIcons={[
+ 'angles-x',
+ 'apple',
+ 'arrow-left-arrow-right',
+ 'arrow-rotate-left',
+ 'bars-uneven',
+ 'burger-glass',
+ 'cloud-softphone',
+ 'diagram',
+ 'fanvil',
+ 'glass',
+ 'grip-dots-h',
+ 'magnifying-glass-min',
+ 'magnifying-glass-min',
+ 'magnifying-glass-plus',
+ 'magnifying-glass-plus',
+ 'microphone-slash',
+ 'moped',
+ 'order-alphabetical-asc',
+ 'order-alphabetical-desc',
+ 'order-numerical-asc',
+ 'order-numerical-desc',
+ 'password',
+ 'phone-xmark',
+ 'teams',
+ 'yealink'
+ ]}
+ updatedIcons={['angles-y', 'magnifying-glass', 'windows']}
+ renamedIcons={[
+ { old: 'thumbstack', new: 'thumbtack' },
+ { old: 'thumbstack-slash', new: 'thumbtack-slash' }
+ ]}
+ />
+ AmaranthIcon component has been renamed to Amicon.
+ >,
+ <>
+ The Amicon component now supports the beat and fade property.
+ >
+ ]}
+ changed={[
+ <>
+ We're updating our branding from Amaranth to Amicons, with a brand new logo and mascot to boot. While the Amaranth and{' '}
+ Amicons icons have existed at the same time in the previous version, we consider the removal of the Amaranth icon a
+ rename.
+ >,
+ <>
+ The default values for all properties of our Amicon component are now being set to Undefined rather than a default truthy
+ value.
+ >,
+ <>
+ The various CSS variables have been renamed to be more consistent with new variables introduced in this update. See the documentation for more info.
+ >,
+ <>
+ You can now pass properties to the Amicon component.
+ >,
+ <>Various updates to the categorization of icons in the documentation.>
+ ]}
+ fixed={[
+ <>
+ Fixed the expand icon including excessive shapes.
+ >,
+ <>
+ Fixed the misalignment in the heading-2 icon to better map the icon to a pixel grid.
+ >,
+ <>
+ Fixes various issues with the CSS variables in the Amicon component.
+ >
+ ]}
+ newIcons={[
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ 'a',
+ 'arrow-down-arrow-up',
+ 'arrow-up-right-from-square',
+ 'b',
+ 'battery-charging',
+ 'battery-empty',
+ 'battery-exclamation',
+ 'battery-full',
+ 'battery-half',
+ 'battery-low',
+ 'battery-quarter',
+ 'battery-slash',
+ 'battery-three-quarter',
+ 'broom',
+ 'c',
+ 'calculator',
+ 'camera',
+ 'car-side',
+ 'clipboard',
+ 'command',
+ 'computer-mouse-scroll-wheel',
+ 'computer-mouse',
+ 'crop',
+ 'cursor',
+ 'd',
+ 'dice-five',
+ 'dice-four',
+ 'dice-one',
+ 'dice-six',
+ 'dice-three',
+ 'dice-two',
+ 'dice',
+ 'e',
+ 'ellipsis-h',
+ 'envelope-open',
+ 'export',
+ 'f',
+ 'file-audio',
+ 'file-excel',
+ 'file-powerpoint',
+ 'file-text',
+ 'file-word',
+ 'file-zip',
+ 'flask',
+ 'folder-min',
+ 'folder-open',
+ 'folder-plus',
+ 'frame',
+ 'g',
+ 'grip-dots-v',
+ 'grip-dots',
+ 'h',
+ 'i',
+ 'icons',
+ 'j',
+ 'k',
+ 'keyboard-brightness-high',
+ 'keyboard-brightness-low',
+ 'keyboard',
+ 'l',
+ 'loader',
+ 'm',
+ 'n',
+ 'o',
+ 'option',
+ 'p',
+ 'q',
+ 'r',
+ 'road',
+ 's',
+ 'share-nodes',
+ 'spinner',
+ 'square-dashed',
+ 'square',
+ 'studio-384',
+ 't',
+ 'threads',
+ 'toast',
+ 'train-track',
+ 'triangle-dashed',
+ 'triangle',
+ 'truck-pickup',
+ 'truck-tow',
+ 'u',
+ 'v',
+ 'w',
+ 'x',
+ 'y',
+ 'z'
+ ]}
+ updatedIcons={[
+ 'a-gum',
+ 'envelope',
+ 'facebook',
+ 'heading-1',
+ 'heading-2',
+ 'heading-3',
+ 'heading-4',
+ 'heading-5',
+ 'heading-6',
+ 'patreon',
+ 'safari',
+ 'shuffle',
+ 'translate',
+ 'triangle-exclamation',
+ 'volume-0',
+ 'volume-1',
+ 'volume-2',
+ 'volume-3',
+ 'volume-slash'
+ ]}
+ renamedIcons={[
+ { old: 'amaranth', new: 'amicons' },
+ { old: 'ellipsis', new: 'ellipsis-h' }
+ ]}
+ removedIcons={['amaranth', 'bootstrap', 'font-awesome']}
+ />
+ fade property gives you a basic fade animation.
+ flip property you can mirror your icon on its x-axis, y-axis or both.
+ rotate property you can change the default rotation of your icon.
+ 1s when using pulse.
+ >
+ )
+ },
+ {
+ name: '--ai-animation-timing-function',
+ default: 'linear',
+ description: 'The timing function used for the animation.'
+ },
+ {
+ name: '--ai-animation-iteration-count',
+ default: 'infinite',
+ description: 'Number of times the animation is repeated.'
+ },
+ {
+ name: '--ai-animation-pulse-steps',
+ default: 8,
+ description: (
+ <>
+ Number of steps when the spin property is set to pulse.
+ >
+ )
+ }
+ ]
+ };
+
+ return (
+ spin property you can make your icons play a rotation animation.
+ pulse, some additional variables are available while some defaults are changed.
+ {icon.old} {icon.new}
+ {icon}
+ | Property name | +Default | +Description | +
|---|---|---|
+ {variable.name}
+ |
+
+ {variable.default}
+ |
+ {variable.description} | +
{children}
+