		# @gradio/icons

		## 0.3.0

		### Highlights

		#### New `ImageEditor` component ([#6169](https://github.com/gradio-app/gradio/pull/6169) [`9caddc17b`](https://github.com/gradio-app/gradio/commit/9caddc17b1dea8da1af8ba724c6a5eab04ce0ed8))

		A brand new component, completely separate from `Image` that provides simple editing capabilities.

		- Set background images from file uploads, webcam, or just paste!
		- Crop images with an improved cropping UI. App authors can event set specific crop size, or crop ratios (`1:1`, etc)
		- Paint on top of any image (or no image) and erase any mistakes!
		- The ImageEditor supports layers, confining draw and erase actions to that layer.
		- More flexible access to data. The image component returns a composite image representing the final state of the canvas as well as providing the background and all layers as individual images.
		- Fully customisable. All features can be enabled and disabled. Even the brush color swatches can be customised.

		<video src="https://user-images.githubusercontent.com/12937446/284027169-31188926-fd16-4a1c-8718-998e7aae4695.mp4" autoplay muted></video>

		```py

		def fn(im):
		im["composite"] # the full canvas
		im["background"] # the background image
		im["layers"] # a list of individual layers


		im = gr.ImageEditor(
		# decide which sources you'd like to accept
		sources=["upload", "webcam", "clipboard"],
		# set a cropsize constraint, can either be a ratio or a concrete [width, height]
		crop_size="1:1",
		# enable crop (or disable it)
		transforms=["crop"],
		# customise the brush
		brush=Brush(
		default_size="25", # or leave it as 'auto'
		color_mode="fixed", # 'fixed' hides the user swatches and colorpicker, 'defaults' shows it
		default_color="hotpink", # html names are supported
		colors=[
		"rgba(0, 150, 150, 1)", # rgb(a)
		"#fff", # hex rgb
		"hsl(360, 120, 120)" # in fact any valid colorstring
		]
		),
		brush=Eraser(default_size="25")
		)

		```

		Thanks [@pngwn](https://github.com/pngwn)!

		## 0.2.1
		@@ -4,0 +54,0 @@

package.json

		{
		"name": "@gradio/icons",
		"version": "0.2.1",
		"version": "0.3.0",
		"description": "Gradio UI packages",
		@@ -5,0 +5,0 @@ "type": "module",

src/index.ts

		@@ -1,4 +0,4 @@
		export { default as Error } from "./Error.svelte";
		export { default as Backward } from "./Backward.svelte";
		export { default as Brush } from "./Brush.svelte";
		export { default as BrushSize } from "./BrushSize.svelte";
		export { default as Camera } from "./Camera.svelte";
		@@ -14,2 +14,3 @@ export { default as Chart } from "./Chart.svelte";
		export { default as Copy } from "./Copy.svelte";
		export { default as Crop } from "./Crop.svelte";
		export { default as Dislike } from "./Dislike.svelte";
		@@ -20,2 +21,4 @@ export { default as Download } from "./Download.svelte";
		export { default as Erase } from "./Erase.svelte";
		export { default as Error } from "./Error.svelte";
		export { default as Eyedropper } from "./Eyedropper.svelte";
		export { default as Forward } from "./Forward.svelte";
		@@ -32,6 +35,9 @@ export { default as File } from "./File.svelte";
		export { default as Music } from "./Music.svelte";
		export { default as Palette } from "./Palette.svelte";
		export { default as Pause } from "./Pause.svelte";
		export { default as Play } from "./Play.svelte";
		export { default as Plot } from "./Plot.svelte";
		export { default as Redo } from "./Redo.svelte";
		export { default as Remove } from "./Remove.svelte";
		export { default as Rotate } from "./Rotate.svelte";
		export { default as Settings } from "./Settings.svelte";
		@@ -38,0 +44,0 @@ export { default as Sketch } from "./Sketch.svelte";

src/Erase.svelte

Sorry, the diff of this file is not supported yet

@gradio/icons - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics