docs/.vitepress/theme/components/base/IconButton.vue

<template>
  <button v-bind="$attrs" class="icon-button">
    <slot />
  </button>
</template>

<style scoped>
.icon-button {
  display: inline-flex;
  border: 1px solid transparent;
  text-align: center;
  font-weight: 600;
  padding: 6px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
  border-radius: 6px;
  background-color: var(--vp-c-bg-alt);
  /* width: 56px;
  height: 56px; */
  font-size: 24px;
  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
}

.icon-button:hover {
  border-color: var(--vp-button-alt-hover-border);
  color: var(--vp-button-alt-hover-text);
  background-color: var(--vp-button-alt-hover-bg);
}

.icon-button:active {
  border-color: var(--vp-button-alt-active-border);
  color: var(--vp-button-alt-active-text);
  background-color: var(--vp-button-alt-active-bg);
}

.icon-button.active {
  border-color: var(--vp-c-brand);
  /* color: var(--vp-button-alt-active-text);
  background-color: var(--vp-button-alt-active-bg); */
}
</style>
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org> 2023-06-04 16:59:38 +02:00			`<template>`
			`<button v-bind="$attrs" class="icon-button">`
			`<slot />`
			`</button>`
			`</template>`

			`<style scoped>`
			`.icon-button {`
			`display: inline-flex;`
			`border: 1px solid transparent;`
			`text-align: center;`
			`font-weight: 600;`
			`padding: 6px;`
			`border-radius: 8px;`
			`white-space: nowrap;`
			`transition: color 0.25s, border-color 0.25s, background-color 0.25s;`
			`border-radius: 6px;`
			`background-color: var(--vp-c-bg-alt);`
			`/* width: 56px;`
			`height: 56px; */`
			`font-size: 24px;`
			`transition: color 0.1s, border-color 0.1s, background-color 0.1s;`
			`}`

			`.icon-button:hover {`
			`border-color: var(--vp-button-alt-hover-border);`
			`color: var(--vp-button-alt-hover-text);`
			`background-color: var(--vp-button-alt-hover-bg);`
			`}`

			`.icon-button:active {`
fix(site): Small adjustments color picker and add clear button search bar (#3851) * Small adjustments * Format code * format code * Remove default value * format code * update yml file * Format code * Update docs/.vitepress/theme/components/base/Input.vue Co-authored-by: Karsa <contact@karsa.org> * Add extra check if null or undefined --------- Co-authored-by: Karsa <contact@karsa.org> 2025-12-12 09:25:39 +01:00			`border-color: var(--vp-button-alt-active-border);`
			`color: var(--vp-button-alt-active-text);`
			`background-color: var(--vp-button-alt-active-bg);`
New site! 🚀 (#1275) * add new docs * Add styling * Move files * Add active selection * improve grid overview * improve grid * Add icon detail page * Minor changes * Fix icon preview * optimize home card * Add code examples * Add gitignore * correct temp directory * Add first cusotmizer * Add customizer * fix images paths * Add reset function * Adjust category rendering * Add packages section * Some fixes * Fix vercel build icon * Small code adjustment * move file * Try this * Add code groups with syntax highlighting * Add search icon * Cleanup * update lockfile * turnoff 404 * remove docs/iconMetaData.ts * fix build * Fix build 2 * cleanup * Add icon customizer * Fix build * Add steps * Add Button menu * A lot off fixes! * cleanup * Fix build * Css fixes * Override menu icon * try this to improve preformance * minor improvements * add comment * add readme * Add title * minor fixes * Fixes sliders + removes random backticks from index * Added package list base, still WIP * Added Guide+Source buttons to package list items * Responsive support for XS screens * Map categories count * Adjust tooltip hover position * Add see in action icon * Add download options * Aligns category list items to baseline and decreases category count weight * Fixes event target error for categorylistitems * Added icon release metadata builder * Adds version badges to hero + icon detail overlay * Added contributors. Added Copy Angular. Added release info to icon page. * Centres contributor tooltip * Fixed stroke step + added reset button * Extracted reset button as a separate component for reusability * Makes HomeIconCustomizerIcons less dense * Fixes Button menu * adjust versions and contributors styling on detail page * Fix build? * Fix build 2? * Fix build 3 * Fix build 4 * Fix build 5? * Add latest gh-icon changes * Add comment * Try fetch tags to retrieve release data * try fetch all tags * Add related icons * Add stikcy search bar * Add no results components * Try to fix animation * Try optimizing for categories * Hide buggy animated icon * minor fixes * Add footer * Add contributute link in footer * Add copy name * Add 100% preview icons * remove site directory * clean up * Add redirects * Fix build? * fix redirect? * minor improvements * Fix icons preview on mobile * Small preformance improvement * Dark mode fixes for package icons * Sort related icons by similarity + somewhat better name similarity matching * Replace icon design guide images with uniform SVGs * update lockfile * Adds git clone to manually fetch the main repository for creating release metadata * Remove initial v0.0.0 from release metadata * Add extra CTA to no results behaviour * Remove tags, as they are too overused * Revert "Remove tags, as they are too overused" This reverts commit 909b7563c0c5d98d7eb6e1fa2708d20fc9ecfbf7. * Checkout icons from main * Add absoluteStrokeWidth switch * Add absolute strokewidth to home customizer * Add absolute strokewidth to copy code button * remove unused import * compare build time * improve build speed * Try new release meta data script * add fetch tags * try with branch and remote * try with url * try without ssh * Fix fetch tags in build file * Cleanup * Fix fallback * improve release data * delete relatedIcons.json, because it should be gitignored * Add icon details * Fix import * minor fixes * Try running script parallel * Revert icon details * include aliases in release meta data * Final fixes * Final fixes 2 * minor code adjustment * Fix build * test * Revert concurrent build flow * switch back to concurrent build strategy * revert icon changes * update package.json * update package.json * dedube packages --------- Co-authored-by: Karsa <karsa@karsa.org> 2023-06-04 16:59:38 +02:00			`}`

			`.icon-button.active {`
			`border-color: var(--vp-c-brand);`
			`/* color: var(--vp-button-alt-active-text);`
			`background-color: var(--vp-button-alt-active-bg); */`
			`}`
			`</style>`