@crabas0npm/quis-nemo-pariatur

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

thanhl4861

folder a11y array qs sigint 3d bound deepclone es-shim API dom-testing-library diff typeof module Reflect.getPrototypeOf ender Array.prototype.findLastIndex tslib es2017 ECMAScript 7 nodejs full-width weakset Object.is type limit react pose regular expressions performant circular east-asian-width wordwrap Int8Array functions regexp map omit core signal YAML flat nope settings Object.getPrototypeOf date variables in css typesafe queue validator dir text framework symbols getOwnPropertyDescriptor regular collection.es6 es5 css nesting colors setter popmotion negative zero lockfile extension auth ECMAScript 2018 streams2 $.extend polyfill idle plugin has shrinkwrap tc39 immer flatMap ES2015 reduce move Array.prototype.flatten quote ArrayBuffer.prototype.slice isConcatSpreadable helpers stdlib toArray ES2022 trimLeft progress cjk trimEnd apollo jwt fast-copy setImmediate property emoji format symlinks stringify ES2021 workspace:*typedarray findLast rgb banner electron inference styleguide weakmap datastructure hash directory fast-deep-clone deep-copy types get defineProperty bind Object.keys push zero reuse Underscore query log tdd ES8 classnames io-ts hooks flags character stateless RxJS contains promises WeakMap read transpiler es2015 @@toStringTag arraybuffer syntaxerror let object variables logging authentication sameValueZero argv WeakSet modules mime-db 6to5 ECMAScript 2023 regular expression bundler iteration css-in-js ReactiveExtensions phone sort pipe i18n spring guid censor Array.prototype.flatMap await korean jest bluebird typanion robust every browserlist es eslintconfig async group computed-types logger expression es7 WebSockets classes moment fp chinese proto equality enumerable configurable codes CSSStyleDeclaration preprocessor hasOwn web deterministic unicode prune native pose glob util tty debug eslint once formatting jsonpath whatwg gradients css3 sharedarraybuffer es8 filter spinners util.inspect pretty installer find es6 sham css less recursive input Float64Array assign waapi ECMAScript 6 URL figlet testing full rm -rf status StyleSheet Object.values lesscss Push request crypto chai ESnext Rx dom chromium linux symlink warning watchFile dependencies RegExp#flags shebang side es2018 findup user-streams setPrototypeOf env jsonschema monorepo iterator negative tostringtag parent minimal mime react-hook-form pnpm9 set Uint8ClampedArray typed .env querystring tap validate concurrency zod descriptor indicator value tools slice crypt worker json-schema javascript iterate bundling CSS callbound real-time flag cli typed array names matches harmony joi parents TypedArray inspect argument Object.defineProperty channel rm -fr react toStringTag JSON asserts error deep-clone fetch toobject ECMAScript 2021 assertion tester typedarrays fixed-width ponyfill walk vest width look BigUint64Array middleware react-hooks ES5 react-testing-library ES6 test WebSocket collection sorted column file system [[Prototype]]some term yup ava Object.fromEntries serialization buffer take styled-components callback readable express ArrayBuffer#slice streams ECMAScript 2017 babel style wordbreak traverse nested css listeners scheme Symbol pure Observables search dataView cache jsx find-up string 0 spec command-line exec description exit-code safe busy ES2023 escape Array lru getPrototypeOf write ECMAScript 2015 utils less css events l10n superstruct jsdom point-free jQuery starter dayjs curried es-abstract URLSearchParams password characters ES2018 -0 serialize reducer output higher-order link Array.prototype.findLast protobuf redux fsevents metadata drag compare language serializer karma Promise Map fast-clone less.js xss ArrayBuffer persistent lazy trim ES2020 encryption optimist ES2016 jasmine limited gdpr Microsoft uuid parser node sigterm uninstall tacit Float32Array writable dependency manager optimizer utilities https up dotenv equal accessibility redact descriptors import less redux-toolkit AsyncIterator json groupBy mkdirp make dir xterm offset Observable shell consume bootstrap css Streams eslint-plugin ES Iterator duplex create babel-core compiler Uint8Array client fastclone promise json-schema-validator handlers ascii postcss-plugin deepcopy speed autoprefixer Function.prototype.name css variable Stream scheme-validation es-shims airbnb connect flatten throttle immutable from eventDispatcher api String.prototype.matchAll mobile byteOffset getopt assert rfc4122 terminal watch values argparse path view String.prototype.trim js ansi package obj functional length efficient internal slot deep Array.prototype.filter arrays drop extra getter rm package.json Array.prototype.includes wget browserslist exit mkdir chrome styling var bootstrap less Array.prototype.flat performance wrap rmdir invariant utility const spinner stream hookform callbind concatMap Uint32Array code points curl Int16Array Object merge

@crabas0npm/quis-nemo-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 @crabas0npm/quis-nemo-pariatur
# using pnpm
pnpm install -D @crabas0npm/quis-nemo-pariatur
# using yarn
yarn add --dev @crabas0npm/quis-nemo-pariatur

Usage

Vite config

import { svgSpritemap } from '@crabas0npm/quis-nemo-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. |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@crabas0npm/quis-nemo-pariatur

Features

Installation

Usage

Options