@zibuthe7j11/et-cum-eaque

v1.0.0

Published

7 months ago

This [vite](https://vitejs.dev/) plugin generates a single SVG spritemap containing multiple <symbol> elements from all `.svg` files in a directory.

Downloads

0High
0Medium
0Low

vnhat562

from korean StyleSheet querystring mime-db toobject macos time linewrap bound symlink dataview ES3 diff scheme javascript groupBy lint util airbnb Observable Underscore private data Push positive dependencies browser task match compile less TypeScript proto mixins ender extend gdpr popmotion patch JSON-Schema Uint8ClampedArray Array.prototype.contains mkdir mru object tester type auth safe listeners typedarrays visual ArrayBuffer#slice keys starter reduce redux-toolkit packages command-line buffer obj deepcopy es5 trimEnd RegExp#flags file system fast ts testing logging scheme-validation handlers assert package.json is spinners negative find-up es shebang jsonschema zod flatten stateless break transpile modules wordwrap up less css CSSStyleDeclaration Iterator jsonpath option $.extend pose color indicator url data spec styling setImmediate variables progress regular mimetypes babel touch regular expressions negative zero array sanitize japanese less compiler fast-clone immer gradients css JSON rm browserlist queue hookform tape find error-handling hooks deepclone tools regex move Object.fromEntries lru assertion String.prototype.matchAll json collection drag classnames bcrypt prefix spring make dir xterm qs 0 Array.prototype.includes argv native redux hasOwn serialization Array css less traverse optimist banner chinese sameValueZero Microsoft getPrototypeOf has callbind batch arktype events status point-free rm -rf wrap slot internal slot class-validator log env postcss-plugin eslintconfig map flag expression jest error shim reducer set getopt characters ECMAScript 3 jasmine whatwg exit-code import pure nope callbound stdlib process sanitization emoji sharedarraybuffer iterator chromium awesomesauce superagent shrinkwrap es7 jsdom browserslist stylesheet folder react animation string package width stringify walking once internal babel-core equality RxJS directory idle toStringTag waapi property watch l10n react-hooks column validator jsx pyyaml matchAll unicode ES2018 value lockfile styles define Function.prototype.name middleware estree enumerable throat ArrayBuffer.prototype.slice telephone Float64Array fast-copy immutable zero typeerror validation Promise environment offset escape Object.getPrototypeOf utils make cjk fastcopy express joi descriptor parse styleguide description ES8 BigInt64Array cache authentication Float32Array redact name length nested css es-shims sham Object.keys serialize ECMAScript 2017 ECMAScript 2015 spinner accessor limit picomatch throttle ajax postcss WeakSet filter regexp queueMicrotask fastclone forEach symlinks installer ECMAScript 2019 module delete dayjs json-schema-validator Array.prototype.findLast fp tostringtag character ES6 mkdirp mkdirs bundling mocha channel ReactiveX promise concatMap yaml metadata defineProperty ES2016 higher-order minimal ECMAScript 2020 json-schema-validation rangeerror generics xhr electron monorepo es-shim API dom sigint loading deterministic linux properties cli intrinsic install command warning phone concat omit fsevents bootstrap css inspect codes output ES5 lazy exec mobile which speed schema compare form-validation slice call-bind libphonenumber dotenv tty core-js a11y gestures typanion pretty react robust WeakMap ecmascript circular file form commander web argument Object.entries ramda isConcatSpreadable Symbol.toStringTag cors variables in css real-time ECMAScript 2022 crypto trimRight deep-copy arrays jQuery Observables Array.prototype.flatten preprocessor Object.values fast-deep-copy node ES2015 performance quote censor iteration eventEmitter recursive workspace:*request deep password emit dataView inference hash ReactiveExtensions TypeBox symbols weakmap multi-package Uint8Array ECMAScript 7 callback trimStart toSorted sort curl http eslint irq transpiler getOwnPropertyDescriptor animation less.js plugin streams style push RFC-6455 ES2017 ascii css autoprefixer parents walk xss Int16Array client AsyncIterator uninstall equal TypedArray Uint32Array limited karma optimizer private arraybuffer computed-types Streams create duplex art sorted ES2020 last ECMAScript 2023 findLast text stable Rx bluebird bootstrap less language busy require Uint16Array term call-bound vest superstruct 6to5 types signals extra eslint-plugin typed array less east-asian-width logger pipe prune interrupts classname css variable ie prop input react-testing-library Object.assign terminal Symbol invariant serializer encryption ES2023 typedarray tslib findLastIndex figlet weakset nodejs eslintplugin Reflect.getPrototypeOf remove side ES2022 rate readable styled-components @@toStringTag syntaxerror worker getintrinsic path functional .env Array.prototype.flatMap args harmony extension helpers [[Prototype]]console

@zibuthe7j11/et-cum-eaque

This vite plugin generates a single SVG spritemap containing multiple elements from all .svg files in a directory.

Features

Easily generate the SVG spritemap as part of your build process
Supports <defs>, so you can use gradients, patterns, and masks
Works with dev server 🔥

If you find this plugin useful, why not

Installation

# using npm
npm install -D @zibuthe7j11/et-cum-eaque
# using pnpm
pnpm install -D @zibuthe7j11/et-cum-eaque
# using yarn
yarn add --dev @zibuthe7j11/et-cum-eaque

Usage

Vite config

import { svgSpritemap } from '@zibuthe7j11/et-cum-eaque';

export default defineConfig({
  plugins: [
    svgSpritemap({
      pattern: 'src/icons/*.svg',
    }),
  ],
});

SVG element

export const Icon: React.FC<{ name: string }> = ({ name }) => (
  <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
    <use xlinkHref={`/spritemap.svg#${name}`} />
  </svg>
);

const App = () => {
  return <Icon name="arrow" />;
};

Options

| Option | Type | Description | | -------------- | ------------------------------------ | --------------------------------------------------------------------------------------------- | | pattern | string | A glob pattern that specifies which SVG files to include in the sprite. | | prefix | string (optional) | A string that is added to the beginning of each SVG icon's ID when it is added to the sprite. | | filename | string (optional) | The name of the output file that contains the SVG sprite. Default is spritemap.svg. | | currentColor | boolean (optional) | Replace colors in the SVGs with the currentColor value by SVGO. Default is true. | | svgo | SVGOConfig or boolean (optional) | Use SVGO for optimization. Default is true. |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@zibuthe7j11/et-cum-eaque

Features

Installation

Usage

Options