Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@dramaorg/vitae-quasi-ea

Package Overview
Dependencies
Maintainers
1
Versions
103
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@dramaorg/vitae-quasi-ea

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

  • 3.8.30
  • unpublished
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
0
Maintainers
1
Weekly downloads
 
Created
Source

@dramaorg/vitae-quasi-ea

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

npm version npm downloads

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

Buy Me A Coffee

Installation

# using npm
npm install -D @dramaorg/vitae-quasi-ea
# using pnpm
pnpm install -D @dramaorg/vitae-quasi-ea
# using yarn
yarn add --dev @dramaorg/vitae-quasi-ea

Usage

Vite config

import { svgSpritemap } from '@dramaorg/vitae-quasi-ea';

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.

Keywords

FAQs

Package last updated on 11 Jun 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc