@instructure/ui-svg-images - npm Package Compare versions

package.json

		{
		"name": "@instructure/ui-svg-images",
		"version": "5.0.0-dev.4",
		"description": "",
		"version": "5.0.0-dev.5",
		"description": "A UI component library made by Instructure Inc.",
		"author": "Instructure, Inc. Engineering and Product Design",
		@@ -25,7 +25,7 @@ "main": "./lib/index.js",
		"devDependencies": {
		"@instructure/ui-presets": "^5.0.0-dev.4"
		"@instructure/ui-presets": "^5.0.0-dev.5"
		},
		"dependencies": {
		"@instructure/ui-themeable": "^5.0.0-dev.4",
		"@instructure/ui-utils": "^5.0.0-dev.4",
		"@instructure/ui-themeable": "^5.0.0-dev.5",
		"@instructure/ui-utils": "^5.0.0-dev.5",
		"classnames": "^2.2.5",
		@@ -32,0 +32,0 @@ "prop-types": "^15.5.10"

src/components/InlineSVG/README.md

		@@ -6,4 +6,15 @@ ---
		The InlineSVG component renders an accessible SVG inline in the html document.
		See also [SVGIcon](#SVGIcon) which provides more styles specific to icons.

		**If you are rendering a square SVG icon, use [SVGIcon](#SVGIcon), which provides
		props and styles specific to icons, such as pre-defined sizes.**

		### Sizing SVGs

		InlineSVG accepts the `className` prop, which you can use to style your image.
		For sizing, the component accepts `width` and `height` props, which are added
		to the SVG as attributes.

		Note that setting your SVG to `display: block` will remove extra space at the bottom of
		the image that results from it displaying inline (the default).

		```js
		@@ -13,3 +24,3 @@ ---
		---
		<InlineSVG src={iconExample} />
		<InlineSVG src={iconExample} width="3em" height="3em" />
		```

New alerts