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

@kaizen/hosted-assets

Package Overview
Dependencies
Maintainers
5
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@kaizen/hosted-assets

Hosted assets for Culture Amp's Kaizen Design System.

  • 1.1.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
38K
decreased by-4.4%
Maintainers
5
Weekly downloads
 
Created
Source

Kaizen Hosted Assets

Hosted assets used in Culture Amp's Kaizen Design System.

API

assetUrl(path)

Returns the full URL of the asset at path managed by the kaizen-design-system-assets service.

TypeScript/JavaScript

assetUrl("some/blob.png") // -> "https://<origin>/some/blob.png"

SCSS

asset-url("some/blob.png") // -> "https://<origin>/some/blob.png"

If you want to use an image

  1. Make sure the image exists in the kaizen-design-system-assets repo. If it doesn't, make a PR to add it (ask the Design Systems team for review). Images in this repo will be automatically uploaded and made available via a CloudFront distribution.
  2. Make sure that the @kaizen/hosted-assets package is in your repo's package.json. This package provides you the assetUrl function that translates the path to the file in the kaizen-design-system-assets repo into its equivalent CloudFront URL.
  3. Import the @kaizen/hosted-assets package and you can access the image through the assetUrl/asset-url function:
// TS/JS
import { assetUrl } from "@kaizen/hosted-assets";

<SomeComponent
  image={assetUrl("illustrations/plant-based-ham-substitute.png")}
/>
// SCSS
@import "~@kaizen/hosted-assets/index";

.coolpic {
  background-image: url(asset-url(
    "illustrations/plant-based-ham-substitute.png"
  ));
}

See also

FAQs

Package last updated on 16 May 2021

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