1.0.0 • Published 16 days ago

@zibuthe7j11/et-cum-eaque v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
16 days ago

@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

OptionTypeDescription
patternstringA glob pattern that specifies which SVG files to include in the sprite.
prefixstring (optional)A string that is added to the beginning of each SVG icon's ID when it is added to the sprite.
filenamestring (optional)The name of the output file that contains the SVG sprite. Default is spritemap.svg.
currentColorboolean (optional)Replace colors in the SVGs with the currentColor value by SVGO. Default is true.
svgoSVGOConfig or boolean (optional)Use SVGO for optimization. Default is true.
fromkoreanStyleSheetquerystringmime-dbtoobjectmacostimelinewrapboundsymlinkdataviewES3diffschemejavascriptgroupBylintutilairbnbObservableUnderscoreprivate dataPushpositivedependenciesbrowsertaskmatchcompile lessTypeScriptprotomixinsenderextendgdprpopmotionpatchJSON-SchemaUint8ClampedArrayArray.prototype.containsmkdirmruobjecttestertypeauthsafelistenerstypedarraysvisualArrayBuffer#slicekeysstarterreduceredux-toolkitpackagescommand-linebufferobjdeepcopyes5trimEndRegExp#flagsfile systemfasttstestingloggingscheme-validationhandlersassertpackage.jsonisspinnersnegativefind-upesshebangjsonschemazodflattenstatelessbreaktranspilemoduleswordwrapupless cssCSSStyleDeclarationIteratorjsonpathoption$.extendposecolorindicatorurldataspecstylingsetImmediatevariablesprogressregularmimetypesbabeltouchregular expressionsnegative zeroarraysanitizejapaneseless compilerfast-cloneimmergradients cssJSONrmbrowserlistqueuehookformtapefinderror-handlinghooksdeepclonetoolsregexmoveObject.fromEntrieslruassertionString.prototype.matchAlljsoncollectiondragclassnamesbcryptprefixspringmake dirxtermqs0Array.prototype.includesargvnativereduxhasOwnserializationArraycss lesstraverseoptimistbannerchinesesameValueZeroMicrosoftgetPrototypeOfhascallbindbatcharktypeeventsstatuspoint-freerm -rfwrapslotinternal slotclass-validatorlogenvpostcss-plugineslintconfigmapflagexpressionjesterrorshimreducersetgetoptcharactersECMAScript 3jasminewhatwgexit-codeimportpurenopecallboundstdlibprocesssanitizationemojisharedarraybufferiteratorchromiumawesomesaucesuperagentshrinkwrapes7jsdombrowsersliststylesheetfolderreact animationstringpackagewidthstringifywalkingonceinternalbabel-coreequalityRxJSdirectoryidletoStringTagwaapipropertywatchl10nreact-hookscolumnvalidatorjsxpyyamlmatchAllunicodeES2018valuelockfilestylesdefineFunction.prototype.namemiddlewareestreeenumerablethroatArrayBuffer.prototype.slicetelephoneFloat64Arrayfast-copyimmutablezerotypeerrorvalidationPromiseenvironmentoffsetescapeObject.getPrototypeOfutilsmakecjkfastcopyexpressjoidescriptorparsestyleguidedescriptionES8BigInt64ArraycacheauthenticationFloat32Arrayredactnamelengthnested csses-shimsshamObject.keysserializeECMAScript 2017ECMAScript 2015spinneraccessorlimitpicomatchthrottleajaxpostcssWeakSetfilterregexpqueueMicrotaskfastcloneforEachsymlinksinstallerECMAScript 2019moduledeletedayjsjson-schema-validatorArray.prototype.findLastfptostringtagcharacterES6mkdirpmkdirsbundlingmochachannelReactiveXpromiseconcatMapyamlmetadatadefinePropertyES2016higher-orderminimalECMAScript 2020json-schema-validationrangeerrorgenericsxhrelectronmonorepoes-shim APIdomsigintloadingdeterministiclinuxpropertiescliintrinsicinstallcommandwarningphoneconcatomitfseventsbootstrap cssinspectcodesoutputES5lazyexecmobilewhichspeedschemacompareform-validationslicecall-bindlibphonenumberdotenvttycore-jsa11ygesturestypanionprettyreactrobustWeakMapecmascriptcircularfileformcommanderwebargumentObject.entriesramdaisConcatSpreadableSymbol.toStringTagcorsvariables in cssreal-timeECMAScript 2022cryptotrimRightdeep-copyarraysjQueryObservablesArray.prototype.flattenpreprocessorObject.valuesfast-deep-copynodeES2015performancequotecensoriterationeventEmitterrecursiveworkspace:*requestdeeppasswordemitdataViewinferencehashReactiveExtensionsTypeBoxsymbolsweakmapmulti-packageUint8ArrayECMAScript 7callbacktrimStarttoSortedsortcurlhttpeslintirqtranspilergetOwnPropertyDescriptoranimationless.jspluginstreamsstylepushRFC-6455ES2017asciicssautoprefixerparentswalkxssInt16ArrayclientAsyncIteratoruninstallequalTypedArrayUint32Arraylimitedkarmaoptimizerprivatearraybuffercomputed-typesStreamscreateduplexartsortedES2020lastECMAScript 2023findLasttextstableRxbluebirdbootstrap lesslanguagebusyrequireUint16Arraytermcall-boundvestsuperstruct6to5typessignalsextraeslint-plugintyped arraylesseast-asian-widthloggerpipepruneinterruptsclassnamecss variableiepropinputreact-testing-libraryObject.assignterminalSymbolinvariantserializerencryptionES2023typedarraytslibfindLastIndexfigletweaksetnodejseslintpluginReflect.getPrototypeOfremovesideES2022ratereadablestyled-components@@toStringTagsyntaxerrorworkergetintrinsicpathfunctional.envArray.prototype.flatMapargsharmonyextensionhelpers[[Prototype]]console
1.0.0

16 days ago