@codemonster-ru/vueiconify 0.7.0 → 1.0.0

package/LICENSE.md

@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -0,0 +1,275 @@
+# VueIconify
+
+[![npm version](https://img.shields.io/npm/v/%40codemonster-ru%2Fvueiconify?logo=npm)](https://www.npmjs.com/package/@codemonster-ru/vueiconify)
+[![npm downloads/week](https://img.shields.io/npm/dw/%40codemonster-ru%2Fvueiconify?logo=npm)](https://www.npmjs.com/package/@codemonster-ru/vueiconify)
+[![License](https://img.shields.io/npm/l/%40codemonster-ru%2Fvueiconify)](./LICENSE.md)
+
+Lightweight Vue 3 icon library with a single generic `VueIconify` wrapper.
+
+The current direction is `solid`-first: new icons are created and refined as `solid`, while the small existing `regular` layer is kept as an experimental secondary style.
+
+## Installation
+
+```bash
+npm install @codemonster-ru/vueiconify
+```
+
+Peer dependency:
+
+```bash
+npm install vue
+```
+
+Minimum supported Vue version: `3.5.0`.
+
+## Usage
+
+Generic icon component:
+
+```vue
+<script setup lang="ts">
+import { VueIconify, icons } from '@codemonster-ru/vueiconify';
+</script>
+
+<template>
+    <VueIconify :icon="icons.calendar" />
+    <VueIconify :icon="icons.shield" :size="24" />
+    <VueIconify :icon="icons.circleNotch" spin />
+    <VueIconify icon="warning" width="24" height="24" aria-label="Warning" />
+</template>
+```
+
+Category-oriented example:
+
+```vue
+<script setup lang="ts">
+import { VueIconify, icons } from '@codemonster-ru/vueiconify';
+</script>
+
+<template>
+    <VueIconify :icon="icons.arrowLeft" />
+    <VueIconify :icon="icons.copy" />
+    <VueIconify :icon="icons.folder" />
+    <VueIconify :icon="icons.info" />
+</template>
+```
+
+## API
+
+### `VueIconify`
+
+Props:
+
+- `icon: string` - icon name or imported token from `icons` (recommended). Invalid values fall back to `moon`.
+- `style: 'solid' | 'regular'` - visual variant for icons that provide a regular version. Falls back to `solid` when the requested variant is unavailable.
+- `size: string | number` - sets both `width` and `height`. Default: `16`.
+- `spin: boolean` - applies continuous rotation animation.
+
+Existing dual-style icons:
+
+- `bars`
+- `check`
+- `xmark`
+- `calendar`
+- `bell`
+- `mail`
+- `message`
+- `user`
+- `lock`
+- `gear`
+
+Attributes:
+
+- Standard Vue attributes are forwarded to the rendered SVG component, including `class`, `style`, `width`, `height`, `role`, and `aria-*`.
+- Explicit `width` and `height` attributes can still be used when you need non-square sizing.
+
+Supported icon names:
+
+<!-- generated-category-summary:start -->
+
+- **Movement**: 17 icons
+- **Editing And Commands**: 21 icons
+- **Interface Objects**: 42 icons
+- **Status And Messaging**: 19 icons
+
+<!-- generated-category-summary:end -->
+
+<!-- generated-icon-names:start -->
+
+Movement:
+
+- `arrowDown`
+- `arrowLeft`
+- `arrowRight`
+- `arrowUp`
+- `bars`
+- `caretDown`
+- `caretLeft`
+- `caretRight`
+- `caretUp`
+- `chevronDown`
+- `chevronLeft`
+- `chevronRight`
+- `chevronUp`
+- `collapse`
+- `columns`
+- `expand`
+- `grid`
+
+Editing And Commands:
+
+- `check`
+- `clipboard`
+- `copy`
+- `download`
+- `ellipsis`
+- `externalLink`
+- `filter`
+- `funnelX`
+- `link`
+- `logIn`
+- `logOut`
+- `minus`
+- `pencil`
+- `plus`
+- `refresh`
+- `send`
+- `sliders`
+- `sort`
+- `trash`
+- `upload`
+- `xmark`
+
+Interface Objects:
+
+- `archive`
+- `bell`
+- `bookmark`
+- `briefcase`
+- `building`
+- `calendar`
+- `chartBar`
+- `cloud`
+- `code`
+- `cpu`
+- `creditCard`
+- `database`
+- `file`
+- `fileText`
+- `folder`
+- `folderOpen`
+- `gear`
+- `globe`
+- `hardDrive`
+- `heart`
+- `house`
+- `inbox`
+- `key`
+- `layers`
+- `lock`
+- `magnifyingGlass`
+- `mail`
+- `message`
+- `phone`
+- `plug`
+- `receipt`
+- `server`
+- `star`
+- `terminal`
+- `unlock`
+- `user`
+- `userCheck`
+- `userMinus`
+- `userPlus`
+- `users`
+- `share`
+- `wallet`
+
+Status And Messaging:
+
+- `activity`
+- `alertCircle`
+- `ban`
+- `checkCircle`
+- `circleHalf`
+- `circleNotch`
+- `clock`
+- `eye`
+- `eyeSlash`
+- `history`
+- `info`
+- `moon`
+- `question`
+- `rotateRight`
+- `shield`
+- `sparkles`
+- `sun`
+- `warning`
+- `xCircle`
+
+<!-- generated-icon-names:end -->
+
+## Available Exports
+
+Primary exports:
+
+<!-- generated-exports:start -->
+
+- `VueIconify`
+- `icons`
+
+<!-- generated-exports:end -->
+
+## Design Principles
+
+- Icons follow a custom UI-solid style built for compact product interfaces.
+- Shapes use soft geometry, large negative space, and readable silhouettes at `16px` and `20px`.
+- The set avoids tracing or reproducing third-party icon paths and keeps its own proportions and corner treatment.
+- New icons should be checked for optical balance, consistent thickness, and clear meaning before merge.
+
+## Core Set
+
+- The preferred starter set for product UIs is defined in [`src/lib/iconCore.json`](./src/lib/iconCore.json).
+- It is intentionally smaller than the full pack and biased toward SaaS/admin dashboards, forms, tables, auth, billing, messaging, and infrastructure views.
+- Semantic guidance for near-duplicates lives in [`docs/icon-audit.md`](./docs/icon-audit.md).
+
+The public API intentionally uses a single rendering entry point:
+
+- use `VueIconify` for rendering
+- pass icon tokens from `icons` to the `icon` prop
+
+## Development
+
+```bash
+npm ci
+npm run create-icon -- alertTriangle feedback
+npm run generate
+npm run validate-icons
+npm run lint
+npm run typecheck
+npm run build
+npm run smoke
+npm run render
+```
+
+`npm run create-icon -- <iconName> <categoryId>` scaffolds a new `solid` icon component, registers it in `src/lib/iconMeta.json`, and seeds title/keyword metadata in `src/lib/iconCatalog.json`.
+
+`npm run validate-icons` fails if metadata, catalog entries, generated exports, `icons.json`, or README blocks are out of sync.
+
+`npm run render` mounts a few public icons through Vue SSR to catch runtime regressions in the published bundle.
+
+## Releases
+
+- Create a changeset with `npm run changeset` for every user-facing change.
+- Merge changesets into `main` and let the release workflow open or update the version PR.
+- When the version PR is merged, Changesets publishes to npm and creates the GitHub Release automatically.
+
+## Showcase
+
+- `npm run dev` starts the local showcase.
+- `npm run build:showcase` builds the demo app.
+- The showcase is local-only for now and can later be embedded into your own site.
+
+## License
+
+[MIT](./LICENSE.md)

package/dist/index.css

@@ -1 +1 @@
-.cm-icon_animations_spin[data-v-e8b1cecb]{animation-name:cm-spin-e8b1cecb;animation-delay:0s;animation-duration:2s;animation-direction:normal;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes cm-spin-e8b1cecb{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
+.vif-icon_animations_spin[data-v-33e2b5c9]{animation-name:vif-spin-33e2b5c9;animation-delay:0s;animation-duration:2s;animation-direction:normal;animation-iteration-count:infinite;animation-timing-function:linear}@keyframes vif-spin-33e2b5c9{0%{transform:rotate(0)}to{transform:rotate(360deg)}}