SCSS Functions

For projects that use SCSS, you can generate functions instead of CSS variables:

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.