@ptkhanh94npm/labore-fuga-pariatur NPM | npm.io

1.0.0 • Published 2 years ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

2 years ago

@ptkhanh94npm/labore-fuga-pariatur

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 @ptkhanh94npm/labore-fuga-pariatur
# using pnpm
pnpm install -D @ptkhanh94npm/labore-fuga-pariatur
# using yarn
yarn add --dev @ptkhanh94npm/labore-fuga-pariatur

Usage

Vite config

import { svgSpritemap } from '@ptkhanh94npm/labore-fuga-pariatur';

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`.

Object apollo random reuse AsyncIterator consume fsevents input Object.getPrototypeOf fast-deep-clone watchFile sequence diff ECMAScript 2023 Float64Array name sharedarraybuffer copy directory last ts positive forms ramda delete make protocol-buffers streams jwt module promises es2016 Array.prototype.findLastIndex warning filter scheme-validation width throttle starter less task flat workspace:*Int32Array react-testing-library json Object.fromEntries events Object.assign call-bind matches request touch bootstrap css let compare CSS babel-core look full column unicode readablestream parser symlink jest text Object.keys jasmine prototype RegExp.prototype.flags Observables eslint-plugin packages collection.es6 ReactiveX es Push generics es2015 sanitization Symbol.toStringTag regex WeakMap Underscore robust listeners performant linewrap JSON-Schema Promise runtime dataView ava environment spinner mobile gestures ansi sigint typescript await superagent less mixins byte Int8Array push css variable eventDispatcher lockfile formatting drag trimRight dom URLSearchParams fast RegExp#flags ES2019 react animation throat functional eslint browserlist RxJS fixed-width [[Prototype]]parent mkdir utilities es2017 es-shim API value javascript Set extend trimLeft arrays bootstrap less stringifier password deep-copy resolve css-in-js stable redact ES2020 characters contains l10n rangeerror xhr limit Float32Array preprocessor Uint16Array tc39 json-schema-validator ESnext typesafe crypt group json-schema reducer setImmediate BigInt64Array core-js ECMAScript 2020 includes figlet error 256 ie querystring StyleSheet windows three YAML commander merge tty function flags minimal Iterator linux bound assign es-abstract yup debug shared ECMAScript 5 es7 ES2022 JSON classes argv helpers gradients css3 monorepo dotenv args toArray iteration process accessibility dom-testing-library karma stylesheet Uint32Array find define accessor HyBi negative ES2018 defineProperty CSSStyleDeclaration tdd internal file system validate ES2021 ES ECMAScript 2015 Streams autoprefixer es2018 datastructure up descriptor tostringtag react pose flag yaml eslintconfig call-bound pipe equal fullwidth bdd animation deepclone test Microsoft setter 0 channel tacit util.inspect signals descriptors ECMAScript 2017 offset connect sorted object fp symbols clone dayjs code points ender Array.prototype.flatten concat syntax ES3 buffer Int16Array rgb Observable mime drop description pose parse codes groupBy command-line io-ts Stream key computed-types tools zero form-validation duplex ECMAScript 2022 npm ArrayBuffer.prototype.slice rm -fr stringify var sameValueZero telephone slot chrome harmony every prefix logger callbind utility serializer whatwg fast-copy symbol Uint8ClampedArray character middleware spring weakset sanitize bluebird set es6 eslintplugin coercible ECMAScript 2019 package require iterate cjk mimetypes traverse progress graphql gradients css readable assertion variables fetch banner TypedArray slice which efficient css less higher-order form client fastclone regular expression uuid read fastcopy isConcatSpreadable pyyaml spec colour picomatch shim queue install operating-system properties jQuery tslib typanion argparse emoji callback cors wordbreak $.extend css nesting joi compiler deepcopy shebang serialization argument chromium bind browserslist Array.prototype.includes qs indicator rm pure map getopt ECMAScript 2021 escape values ES2015 property Reflect.getPrototypeOf mixins side es8 ArrayBuffer#slice byteLength http spinners write interrupts worker watcher reduce bundler intrinsic make dir obj logging regular expressions babel const Rx columns WebSocket optimizer react handlers typed moment Array.prototype.findLast ArrayBuffer exit-code typedarray tap electron jsx postcss-plugin react-hooks settings metadata string wordwrap patch auth TypeBox optimist getter dependency manager mru trimStart queueMicrotask hooks ajax lazy Object.entries core async flatten visual take web names getOwnPropertyDescriptor has mkdirp sort safe framework speed ES2016 terminal ECMAScript 7 3d stateless i18n fantasy-land call loading framer quote cli libphonenumber look-up dependencies ast from bundling findLast exit authentication japanese syntaxerror chinese phone less.js typed array debugger classnames 6to5 pnpm9 some open plugin env language assert https multi-package _.extend status sham less compiler iterator matchAll serialize vest length negative zero inspect shell typeof fast-clone nope String.prototype.matchAll dataview walking circular pretty glob persistent configurable user-streams estree deep-clone package.json nodejs Array.prototype.flatMap sigterm Array.prototype.contains config view jsonpath wait symlinks deterministic performance native mocha Map once recursive file find-up get tester flatMap forEach zod hardlinks writable private data validator remove collection redux-toolkit variables in css types move deep scheme typeerror es-shims batch fast-deep-copy testing String.prototype.trim ECMAScript 3 log .env type getintrinsic watching utils Array.prototype.flat console Function.prototype.name chai Uint8Array transpile superstruct colors callbound js irq toStringTag guid limited entries xterm weakmap WeakSet encryption full-width ES7 macos break rm -rf mkdirs extra jsdom compile less regexp watch valid lint idle byteOffset Symbol findup express color typedarrays match point-free url styles protobuf output api toobject concurrency trim fastify wget format arraybuffer ES8 search query concatMap classname asserts equality term trimEnd link lesscss toSorted xss styling ajv browser ECMAScript 6 jsonschema RFC-6455 css inference Array.prototype.filter validation internal slot ecmascript Object.values modules ascii array extension rfc4122 Object.defineProperty class-validator folder polyfill ES6 curried util popmotion a11y schema proto hash censor jsdiff style ECMAScript 2016 rapid date omit hasOwn redux prop ES2017 gdpr styled-components immutable dir private curl time ECMAScript 2018 error-handling rate korean awesomesauce immer enumerable toolkit airbnb rmdir mime-db command regular crypto __proto__import tape ReactiveExtensions less css styleguide parents buffers json-schema-validation ES2023 fs stdlib path findLastIndex data is eventEmitter option -0 preserve-symlinks check uninstall node TypeScript Array

@ptkhanh94npm/quis-saepe-velit @rabiepenpm/explicabo-a-similique @landmineaknpm/quia-facilis-necessitatibus

2 years ago