V0.1

2024-09-28 17:37:29 +02:00
parent 8dfafa9404
commit fb4d566007
64 changed files with 32325 additions and 573 deletions
@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: [JamesCoyle] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 James Coyle
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,42 @@
+# SVG Icon WebComponent
+
+[![](https://chips.james-coyle.now.sh/npm/version/@jamescoyle/svg-icon)](https://www.npmjs.com/package/@jamescoyle/svg-icon)
+[![](https://chips.james-coyle.now.sh/npm/downloads/@jamescoyle/svg-icon)](https://www.npmjs.com/package/@jamescoyle/svg-icon)
+
+A basic webcomponent for rendering a single path SVG icon. This component makes it easy to use SVG path based icon packs such as [MaterialDesignIcons](https://materialdesignicons.com/) and [SimpleIcons](https://simpleicons.org/).
+
+# Usage
+
+1. Install the package from NPM
+    ```
+    npm install @jamescoyle/svg-icon
+    ```
+
+2. Import the component into your application
+    ```
+    import '@jamescoyle/svg-icon'
+    ```
+
+3. Use the icon in your markup
+    ```
+    <svg-icon type="mdi" path="M...z"></svg-icon>
+    ```
+
+# Attributes
+
+| Name    | Default     | Description                                                                                                                          |
+| ------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| type    | null        | This sets the size and viewbox to match the recommended size for the icon pack specified.                                            |
+| path    | null        | Required. An SVG path to render as an icon                                                                                           |
+| size    | 24          | The width and height of the SVG element                                                                                              |
+| viewbox | "0 0 24 24" | The `viewBox` of the SVG element                                                                                                     |
+| flip    | null        | One of "horizontal", "vertical", or "both". Flips the icon in the specified direction(s).                                            |
+| rotate  | 0deg        | Rotates the icon by the specified value. Can be any valid [CSS angle](https://developer.mozilla.org/en-US/docs/Web/CSS/angle) value. |
+
+# Styling
+
+By default the icon will inherit the current font color of the container it is placed within. You can easily provide a specific color using an inline style on the element (`style="color: red"`) or can target the tag as normal with CSS rules.
+
+# Accessibility
+
+You should make use of aria attributes to improve accessibility for users that use screen reading technology. You can use `aria-labelledby` to create a link between an icon and its label. A descriptive `aria-label` can be used to allow screen readers to announce an icon if there is no visual label to accompany it.
@@ -0,0 +1,29 @@
+{
+	"name": "@jamescoyle/svg-icon",
+	"version": "0.2.1",
+	"description": "Icon webcomponent",
+	"main": "lib/svg-icon.js",
+	"directories": {
+		"lib": "lib",
+		"test": "tests"
+	},
+	"scripts": {
+		"test": "jest"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/JamesCoyle/svg-icon.git"
+	},
+	"keywords": [
+		"webcomponents",
+		"icon",
+		"mdi",
+		"pictogrammers"
+	],
+	"author": "Pictogrammers, James Coyle",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/JamesCoyle/svg-icon/issues"
+	},
+	"homepage": "https://github.com/JamesCoyle/svg-icon#readme"
+}
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Document</title>
+
+		<script type="module">
+			import '../lib/svg-icon.js'
+		</script>
+	</head>
+	<body>
+		<svg-icon type="mdi" path="M15,14C12.33,14 7,15.33 7,18V20H23V18C23,15.33 17.67,14 15,14M15,12A4,4 0 0,0 19,8A4,4 0 0,0 15,4A4,4 0 0,0 11,8A4,4 0 0,0 15,12M5,13.28L7.45,14.77L6.8,11.96L9,10.08L6.11,9.83L5,7.19L3.87,9.83L1,10.08L3.18,11.96L2.5,14.77L5,13.28Z"></svg-icon>
+	</body>
+</html>