SVG Icons - Revision history

An: /* How to use SVG icons in Easy Content Builder */

2024-05-31T09:29:13Z

How to use SVG icons in Easy Content Builder

← Older revision		Revision as of 09:29, 31 May 2024
Line 10:		Line 10:
	{{Note\|AUG 2023 - IMPORTANT NOTE: Shopify now allows uploading SVG files. So, the SVG inline instruction below is now deprecated.		{{Note\|AUG 2023 - IMPORTANT NOTE: Shopify now allows uploading SVG files. So, the SVG inline instruction below is now deprecated.

	If you're using the Icons With Text block, you are required to re-upload those SVG icons to be compatible with the new change in Shopify. Then, update your icons' width by following [[Block_Icons_With_Text#Upload_SVG_icons\|this guide]].\|~~info~~}}		If you're using the Icons With Text block, you are required to re-upload those SVG icons to be compatible with the new change in Shopify. Then, update your icons' width by following [[Block_Icons_With_Text#Upload_SVG_icons\|this guide]].\|reminder}}
	'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.		'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.
	With Easy Content Builder, you can add SVGs inline into content blocks like [[Block Section Title\|Section Title]], [[Block Icons With Text\|Icons With Text]].		With Easy Content Builder, you can add SVGs inline into content blocks like [[Block Section Title\|Section Title]], [[Block Icons With Text\|Icons With Text]].
Line 31:		Line 31:

	[[File:Ecb svg example.jpg\|border\|frameless\|1024x1024px]]		[[File:Ecb svg example.jpg\|border\|frameless\|1024x1024px]]


	===How to change SVG icon colors===		===How to change SVG icon colors===

An: /* How to use SVG icons in Easy Content Builder */

2023-09-15T03:10:47Z

How to use SVG icons in Easy Content Builder

← Older revision		Revision as of 03:10, 15 September 2023
Line 8:		Line 8:

	=== How to use SVG icons in Easy Content Builder ===		=== How to use SVG icons in Easy Content Builder ===
	{{Note\|AUG 2023 - IMPORTANT NOTE: Shopify now allows uploading SVG files. ~~For those who used~~ SVG inline ~~(under~~ the Icons With Text block~~), which is now deprecated~~, you are required to re-upload those SVG icons to be compatible with the new change in Shopify. Then update your icons' width by following [[Block_Icons_With_Text#Upload_SVG_icons\|this guide]].\|info}}		{{Note\|AUG 2023 - IMPORTANT NOTE: Shopify now allows uploading SVG files. So, the SVG inline instruction below is now deprecated.

			If you're using the Icons With Text block, you are required to re-upload those SVG icons to be compatible with the new change in Shopify. Then, update your icons' width by following [[Block_Icons_With_Text#Upload_SVG_icons\|this guide]].\|info}}
	'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.		'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.
	With Easy Content Builder, you can add SVGs inline into content blocks like [[Block Section Title\|Section Title]], [[Block Icons With Text\|Icons With Text]].		With Easy Content Builder, you can add SVGs inline into content blocks like [[Block Section Title\|Section Title]], [[Block Icons With Text\|Icons With Text]].
Line 30:		Line 32:
	[[File:Ecb svg example.jpg\|border\|frameless\|1024x1024px]]		[[File:Ecb svg example.jpg\|border\|frameless\|1024x1024px]]

	=== How to change SVG icon colors ===
			===How to change SVG icon colors===
	When using the SVG icons (using Easy Content Builder), you can easily change the color of SVG icons following [[Block Icons With Text\|this guide]] (no need to edit the color of each SVG icon individually).		When using the SVG icons (using Easy Content Builder), you can easily change the color of SVG icons following [[Block Icons With Text\|this guide]] (no need to edit the color of each SVG icon individually).

	=== Free SVG icon libraries ===		===Free SVG icon libraries ===
	Here are some useful resources you can go to for free SVG icons. We hope this will save you time as you search for the perfect vector icon set for your Shopify pages.		Here are some useful resources you can go to for free SVG icons. We hope this will save you time as you search for the perfect vector icon set for your Shopify pages.

	==== Bootstrap icons ====		====Bootstrap icons====
	Website: https://icons.getbootstrap.com/		Website: https://icons.getbootstrap.com/

Line 50:		Line 53:
	</svg>		</svg>

	==== ICONOIR ====		====ICONOIR====
	Website: https://iconoir.com/		Website: https://iconoir.com/

	Iconoir is one of the biggest open source icons libraries. Icons available in SVG format, Font, React and React Native libraries, Figma and Framer.		Iconoir is one of the biggest open source icons libraries. Icons available in SVG format, Font, React and React Native libraries, Figma and Framer.

An: /* How to change SVG icon colors */

2023-08-28T10:12:58Z

How to change SVG icon colors

← Older revision		Revision as of 10:12, 28 August 2023
Line 31:		Line 31:

	=== How to change SVG icon colors ===		=== How to change SVG icon colors ===
	When using the SVG icons (using Easy Content Builder), you can easily change the color of SVG icons following [[Block Icons With Text/this guide]] (no need to edit the color of each SVG icon individually).		When using the SVG icons (using Easy Content Builder), you can easily change the color of SVG icons following [[Block Icons With Text\|this guide]] (no need to edit the color of each SVG icon individually).

	=== Free SVG icon libraries ===		=== Free SVG icon libraries ===

An: /* How to change SVG icon colors */

2023-08-28T10:12:43Z

How to change SVG icon colors

← Older revision		Revision as of 10:12, 28 August 2023
Line 31:		Line 31:

	=== How to change SVG icon colors ===		=== How to change SVG icon colors ===
	When using the SVG icons (using Easy Content Builder), you can easily change the color of SVG icons following [[Block Icons With Text\|this guide]] (no need to edit the color of each SVG icon individually).		When using the SVG icons (using Easy Content Builder), you can easily change the color of SVG icons following [[Block Icons With Text/this guide]] (no need to edit the color of each SVG icon individually).

	=== Free SVG icon libraries ===		=== Free SVG icon libraries ===

An at 10:10, 28 August 2023

2023-08-28T10:10:54Z

← Older revision		Revision as of 10:10, 28 August 2023
Line 29:		Line 29:

	[[File:Ecb svg example.jpg\|border\|frameless\|1024x1024px]]		[[File:Ecb svg example.jpg\|border\|frameless\|1024x1024px]]

			=== How to change SVG icon colors ===
			When using the SVG icons (using Easy Content Builder), you can easily change the color of SVG icons following [[Block Icons With Text\|this guide]] (no need to edit the color of each SVG icon individually).

	=== Free SVG icon libraries ===		=== Free SVG icon libraries ===

An at 05:36, 26 August 2023

2023-08-26T05:36:26Z

← Older revision		Revision as of 05:36, 26 August 2023
Line 8:		Line 8:

	=== How to use SVG icons in Easy Content Builder ===		=== How to use SVG icons in Easy Content Builder ===
	{{Note\|AUG 2023 - IMPORTANT NOTE: Shopify now allows uploading SVG files. For those who used SVG inline (under the Icons With Text block), which is now deprecated, you are required to re-upload those SVG icons to be compatible with the new change in Shopify. Then update your icons' width by following this guide.\|info}}		{{Note\|AUG 2023 - IMPORTANT NOTE: Shopify now allows uploading SVG files. For those who used SVG inline (under the Icons With Text block), which is now deprecated, you are required to re-upload those SVG icons to be compatible with the new change in Shopify. Then update your icons' width by following [[Block_Icons_With_Text#Upload_SVG_icons\|this guide]].\|info}}
	'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.		'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.
	With Easy Content Builder, you can add SVGs inline into content blocks like [[Block Section Title\|Section Title]], [[Block Icons With Text\|Icons With Text]].		With Easy Content Builder, you can add SVGs inline into content blocks like [[Block Section Title\|Section Title]], [[Block Icons With Text\|Icons With Text]].

An at 05:33, 26 August 2023

2023-08-26T05:33:52Z

← Older revision		Revision as of 05:33, 26 August 2023
Line 8:		Line 8:

	=== How to use SVG icons in Easy Content Builder ===		=== How to use SVG icons in Easy Content Builder ===
			{{Note\|AUG 2023 - IMPORTANT NOTE: Shopify now allows uploading SVG files. For those who used SVG inline (under the Icons With Text block), which is now deprecated, you are required to re-upload those SVG icons to be compatible with the new change in Shopify. Then update your icons' width by following this guide.\|info}}
	'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.		'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.
	With Easy Content Builder, you can add SVGs inline into content blocks like [[Block Section Title\|Section Title]], [[Block Icons With Text\|Icons With Text]].		With Easy Content Builder, you can add SVGs inline into content blocks like [[Block Section Title\|Section Title]], [[Block Icons With Text\|Icons With Text]].

An at 07:57, 1 June 2023

2023-06-01T07:57:12Z

← Older revision		Revision as of 07:57, 1 June 2023
Line 25:		Line 25:
	'''<u>Step 2</u>''': Paste the SVG code into the Icon field of Easy Content Builder's block.		'''<u>Step 2</u>''': Paste the SVG code into the Icon field of Easy Content Builder's block.

	Here is an example of the SVG icons used in the Icons with Text block on our demo:		Here is an example of the SVG icons used in the Icons with Text block on our [https://easy-content-builder-demo.myshopify.com/products/razor Razor \| Shave kit demo]:

	[[File:Ecb svg example.jpg\|border\|frameless\|1024x1024px]]		[[File:Ecb svg example.jpg\|border\|frameless\|1024x1024px]]

An at 07:46, 1 June 2023

2023-06-01T07:46:55Z

← Older revision		Revision as of 07:46, 1 June 2023
Line 9:		Line 9:
	=== How to use SVG icons in Easy Content Builder ===		=== How to use SVG icons in Easy Content Builder ===
	'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.		'''NOTE''': Shopify does not allow to upload SVG files at this time. It only supports JPG, PNG, GIF, and WebP on supported browsers.
	With Easy Content Builder, you can add SVGs inline into content blocks like Section Title, Icons With Text.		With Easy Content Builder, you can add SVGs inline into content blocks like [[Block Section Title\|Section Title]], [[Block Icons With Text\|Icons With Text]].

	'''How to insert SVG code:'''		'''How to insert SVG code:'''
Line 15:		Line 15:
	'''<u>Step 1</u>''': Copy the SVG code		'''<u>Step 1</u>''': Copy the SVG code

	If you have an existing SVG file, open up the file using an online editor like Method Draw (or a text editor you're familiar with). Within the '''Method Draw''' > '''View''' > '''Source''', you will see a popup with the SVG code available for you to copy.		If you have an existing SVG file, open up the file using an online editor like [https://editor.method.ac Method Draw] (or a text editor you're familiar with). Within the '''Method Draw''' > '''View''' > '''Source''', you will see a popup with the SVG code available for you to copy.

	[[File:Ecb svg.jpg\|frameless\|1024x1024px]]		[[File:Ecb svg.jpg\|frameless\|1024x1024px]]

An at 07:43, 1 June 2023

2023-06-01T07:43:21Z

@@ Line 1: / Line 1: @@
 Here are some useful resources you can go to for free SVG icons. We hope this will save you time as you search for the perfect vector icon set for your Shopify pages.
-==Bootstrap icons==
+==== Bootstrap icons ====
 Website: https://icons.getbootstrap.com/
@@ Line 15: / Line 46: @@
      </svg>
-==ICONOIR==
+==== ICONOIR ====
 Website: https://iconoir.com/
 Iconoir is one of the biggest open source icons libraries. Icons available in SVG format, Font, React and React Native libraries, Figma and Framer.