SCSS Functions

For projects that use SCSS, you can generate functions instead of CSS variables. This mode is useful when you want SVG assets as reusable Sass functions with dynamic color control during compilation.

svgpack my-icon-folder/ --sass

Example

svgpack test/assets/svgpack-imagotype.svg --sass

Outputs:

@function svgpack-imagotype($color:rgb(5, 4, 4)) {
  $color: str-replace(inspect($color), "#", "%23");
  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 90'%3E%3Cg fill='"+$color+"' fill-rule='evenodd'%3E%3Cpath ...");
}

Usage:

$color: #fff;

.svgpack-main-logo {
  display: block;
  width: 36rem;
  height: 6rem;
  background: svgpack-imagotype($color) center/contain no-repeat;
}

Note: SCSS functions support color parameters, while CSS variables have fixed colors. Both approaches have their advantages depending on your project setup.

If your stack is CSS-first, see CSS Variables. If you need utility generation for Tailwind, see Tailwind v4.