Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metonym/svelvg
Convert SVG files into Svelte components with TypeScript definitions
https://github.com/metonym/svelvg
svelte svelte-compiler svg svg-icons typescript
Last synced: 11 days ago
JSON representation
Convert SVG files into Svelte components with TypeScript definitions
- Host: GitHub
- URL: https://github.com/metonym/svelvg
- Owner: metonym
- License: mit
- Created: 2021-07-31T22:55:27.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-08-27T18:55:44.000Z (2 months ago)
- Last Synced: 2024-10-15T08:43:42.746Z (22 days ago)
- Topics: svelte, svelte-compiler, svg, svg-icons, typescript
- Language: Svelte
- Homepage:
- Size: 1.87 MB
- Stars: 42
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelvg
> Convert SVG files into Svelte components with TypeScript definitions.
> Successor to [svg-to-svelte](https://github.com/metonym/svg-to-svelte)
The minimum Svelte version required to use types generated by this library is v3.55.0.
This library transforms SVG files into Svelte components through the following:
- convert the `svg` file name into a valid module name (e.g., `alarm-fill` --> `AlarmFill`)
- forward `$$restProps` to the `svg` element while preserving attributes from the original `svg`
- add a default `slot` as child element to `svg`
- generate a TypeScript definition by extending the `SvelteComponentTyped` interface
## Usage
### CLI
The easiest way to use this library is through [npx](https://nodejs.dev/learn/the-npx-nodejs-package-runner).
The `glob` value represents the relative path to the folder containing SVG files inside `node_modules/`.
For example, say you have [bootstrap-icons](https://github.com/twbs/icons) installed as a development dependency, which contains icon SVG files in the "icons" folder.
```sh
npx svelvg glob=bootstrap-icons/icons
```
By default, the output directory is `"lib"`. Customize the directory using the `outDir` flag:
```sh
npx svelvg glob=bootstrap-icons/icons outDir=dist
```
Optionally, generate an index of icons (a list of all module names) by enabling the `iconIndex` flag. It will default to creating a `ICON_INDEX.md` file in your working directory.
```sh
npx svelvg glob=bootstrap-icons/icons iconIndex
```
Customize the icon index file name like so:
```sh
npx svelvg glob=bootstrap-icons/icons iconIndex=ICONS.md
```
### Programmatic usage
Alternatively, install `svelvg` from NPM to use it programmatically.
```sh
# NPM
npm i -D svelvg
# pnpm
pnpm i -D svelvg
# Bun
bun add -D svelvg
# Yarn
yarn add -D svelvg
```
```js
import { createLibrary } from "svelvg";
// Generate Svelte components from SVG files in `node_modules/bootstrap-icons/icons`.
// By default, output is emitted to the `lib` directory.
createLibrary("bootstrap-icons/icons");
// Customize the output directory to `dist`.
createLibrary("bootstrap-icons/icons", { outDir: "dist" });
```
### API
#### `createLibrary`
```ts
type CreateLibraryOptions = {
/** @default "lib" */
outDir: string;
/** @default false */
iconIndex: boolean | string;
/**
* Callback to add a list of classes to the SVG element
* provided the original filename and module name
* @example
* filename: "alarm-fill"
* moduleName: "AlarmFill"
*/
appendClassNames: (filename: string, moduleName: string) => string[];
/**
* Override the default module name
*/
toModuleName: (params: {
path: path.ParsedPath;
moduleName: string;
}) => string;
};
```
## Template
Scaffold a new project using the [template](template):
```sh
npx degit metonym/svelvg/template
```
### `IconLibrary.svelte`
`svelvg` exports an `IconLibrary.svelte` to make listing and searching icons easier.
See [template/index.html](template/index.html) for an example.
```html
import IconLibrary from "svelvg/lib/IconLibrary.svelte";
import * as icons from "./lib";
import pkg from "./package.json";
const app = new IconLibrary({
target: document.getElementById("svelte"),
props: {
pkg,
icons,
},
});
```
## License
[MIT](LICENSE)