Media svg

Examples
Typescript ❤️

For fetching and rendering SVGs secure and responsively

Install
yarn add @atlaskit/media-svg
npm
@atlaskit/media-svg
Source
Bitbucket
Bundle
unpkg.com
Changelog
Latest

2.0.0

Major Changes

  • #117363 10a0f7f6c2027 - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

    Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026

Patch Changes

  • Updated dependencies

For fetching and rendering SVGs secure and responsively

WORK IN PROGRESS

This package is under development. If you intend to use it, please reach out to Core Experiences Team in #help-media-platform

Usage

Basic example

MediaSvg Props

testId string

Test Id

identifier import required

SVG file identifier (uploaded to Media Store)

@atlaskit/media-client.FileIdentifier

dimensions object

Dimensions of the rendered image. Can be pixel or any CSS unit. By default, the image will render to its internal dimension properties.

width union One of
number,
string
height union One of
number,
string

onError function

Callback that will be called if an error occurs.

error => undefined

alt string

alt text for the image element

onLoad function

IMG onLoad callback

evt => undefined

onMouseDown function

IMG onMouseDown callback

ev => undefined

style import

Override default styles

react.CSSProperties

innerRef React.Ref<HTMLImageElement>

Reference to the rendered SVG image element

React.RefHTMLImageElement