@jamescoyle/vue-icon - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

tests/svg-icon.spec.js

+import { describe, beforeEach, it, expect } from '@jest/globals'
+import { mount } from '@vue/test-utils'
+import VueIcon from './../lib/svg-icon.vue'
+
+const path = 'M 10 10 H 90 V 90 H 10 L 10 10'
+
+describe('Vue icon', () => {
+	let component
+
+	beforeEach(() => {
+		component = mount(VueIcon, {
+			propsData: {
+				path,
+			},
+		})
+	})
+
+	it("accepts a 'type' property", async () => {
+		await component.setProps({ path, type: 'mdi' })
+
+		expect(component.attributes().height).toBe('24')
+		expect(component.attributes().width).toBe('24')
+		expect(component.attributes().viewBox).toBe('0 0 24 24')
+	})
+
+	it('renders an svg with path element', () => {
+		expect(component.html()).toContain('svg')
+		expect(component.find('path').attributes('d')).toBe(path)
+	})
+
+	it("accepts a 'size' property", async () => {
+		await component.setProps({ path, size: 2 })
+
+		expect(component.attributes().height).toBe('2')
+		expect(component.attributes().width).toBe('2')
+	})
+
+	it("accepts a 'viewbox' property", async () => {
+		await component.setProps({ path, viewbox: '0 0 30 30' })
+
+		expect(component.attributes().viewBox).toBe('0 0 30 30')
+	})
+
+	it("accepts a 'flip' property", async () => {
+		await component.setProps({ path, flip: 'none' })
+
+		expect(getComputedStyle(component.element).getPropertyValue('--sx')).toBe('1')
+		expect(getComputedStyle(component.element).getPropertyValue('--sy')).toBe('1')
+
+		await component.setProps({ path, flip: 'both' })
+
+		expect(getComputedStyle(component.element).getPropertyValue('--sx')).toBe('-1')
+		expect(getComputedStyle(component.element).getPropertyValue('--sy')).toBe('-1')
+
+		await component.setProps({ path, flip: 'horizontal' })
+
+		expect(getComputedStyle(component.element).getPropertyValue('--sx')).toBe('-1')
+		expect(getComputedStyle(component.element).getPropertyValue('--sy')).toBe('1')
+
+		await component.setProps({ path, flip: 'vertical' })
+
+		expect(getComputedStyle(component.element).getPropertyValue('--sx')).toBe('1')
+		expect(getComputedStyle(component.element).getPropertyValue('--sy')).toBe('-1')
+	})
+
+	it("accepts a 'rotate' property", async () => {
+		await component.setProps({ path, rotate: 90 })
+
+		expect(getComputedStyle(component.element).getPropertyValue('--r')).toBe('90deg')
+	})
+})

lib/svg-icon.vue

@@ -39,3 +39,4 @@ <template>
 			type: String,
-			validator: () => ["horizontal", "vertical", "both"].includes(value),
+			validator: (value) =>
+				["horizontal", "vertical", "both", "none"].includes(value),
 		},
@@ -77,2 +78,2 @@ rotate: { type: Number, default: 0 },
 }
-</style>
+</style>

package.json

 {
-	"name": "@jamescoyle/vue-icon",
-	"version": "0.1.0",
-	"description": "Icon component for Vue.js",
-	"main": "lib/svg-icon.vue",
-	"directories": {
-		"lib": "lib",
-		"test": "tests"
-	},
-	"scripts": {
-		"test": "jest"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/JamesCoyle/vue-icon.git"
-	},
-	"keywords": [
-		"Vue",
-		"icon",
-		"mdi",
-		"pictogrammers"
-	],
-	"author": "Pictogrammers, James Coyle",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/JamesCoyle/vue-icon/issues"
-	},
-	"homepage": "https://github.com/JamesCoyle/vue-icon#readme",
-	"devDependencies": {
-		"@babel/core": "^7.11.6",
-		"@babel/plugin-transform-runtime": "^7.11.5",
-		"@babel/preset-env": "^7.11.5",
-		"@vue/test-utils": "^1.1.0",
-		"babel-core": "^7.0.0-bridge.0",
-		"babel-jest": "^26.3.0",
-		"jest": "^26.4.2",
-		"vue": "^2.6.12",
-		"vue-jest": "^3.0.7",
-		"vue-template-compiler": "^2.6.12"
-	}
+  "name": "@jamescoyle/vue-icon",
+  "version": "0.1.1",
+  "description": "Icon component for Vue.js",
+  "main": "lib/svg-icon.vue",
+  "directories": {
+    "lib": "lib",
+    "test": "tests"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JamesCoyle/vue-icon.git"
+  },
+  "keywords": [
+    "Vue",
+    "icon",
+    "mdi",
+    "pictogrammers"
+  ],
+  "author": "Pictogrammers, James Coyle",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/JamesCoyle/vue-icon/issues"
+  },
+  "homepage": "https://github.com/JamesCoyle/vue-icon#readme",
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@vue/test-utils": "^1.2.2",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "vue": "^2.6.14",
+    "vue-jest": "^3.0.7",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "scripts": {
+    "test": "jest"
+  }
 }

README.md

@@ -0,3 +1,8 @@
+Consider using the [webcomponent version](https://github.com/JamesCoyle/svg-icon) of this component for an icon component that can be used in any modern browser with any framework.
+
 # Vue Icon Component
 
+[![](https://chips.james-coyle.now.sh/npm/version/@jamescoyle/vue-icon)](https://www.npmjs.com/package/@jamescoyle/vue-icon)
+[![](https://chips.james-coyle.now.sh/npm/downloads/@jamescoyle/vue-icon)](https://www.npmjs.com/package/@jamescoyle/vue-icon)
+
 An icon component which makes it easy to render SVG path based icons in any Vue project. Provides several helpful properties to manipulate the icon and supports any icon pack which provides icons as a single SVG path to be displayed on a square viewbox.
@@ -7,2 +12,13 @@
 
+1. Install from NPM
+   ```
+   npm install @jamescoyle/vue-icon
+   ```
+
+2. Import into your project
+   ``` 
+   import SvgIcon from '@jamescoyle/vue-icon'
+   ```
+
+## SFC Example
 The following example uses [@mdi/js](https://www.npmjs.com/package/@mdi/js) which provides a wide range of icon paths. It shows how you might use an icon within a single file component.
@@ -9,0 +25,0 @@

tests/icon.spec.js

-import { describe, beforeEach, it, expect } from '@jest/globals'
-import { mount } from '@vue/test-utils'
-import VueIcon from './../lib/icon.vue'
-
-const path = 'M 10 10 H 90 V 90 H 10 L 10 10'
-
-describe('Vue icon', () => {
-	let component
-
-	beforeEach(() => {
-		component = mount(VueIcon, {
-			propsData: {
-				path,
-			},
-		})
-	})
-
-	it("accepts a 'type' property", async () => {
-		await component.setProps({ path, type: 'mdi' })
-
-		expect(component.attributes().height).toBe('24')
-		expect(component.attributes().width).toBe('24')
-		expect(component.attributes().viewBox).toBe('0 0 24 24')
-	})
-
-	it('renders an svg with path element', () => {
-		expect(component.html()).toContain('svg')
-		expect(component.find('path').attributes('d')).toBe(path)
-	})
-
-	it("accepts a 'size' property", async () => {
-		await component.setProps({ path, size: 2 })
-
-		expect(component.attributes().height).toBe('2')
-		expect(component.attributes().width).toBe('2')
-	})
-
-	it("accepts a 'viewbox' property", async () => {
-		await component.setProps({ path, viewbox: '0 0 30 30' })
-
-		expect(component.attributes().viewBox).toBe('0 0 30 30')
-	})
-
-	it("accepts a 'flip' property", async () => {
-		await component.setProps({ path, flip: 'none' })
-
-		expect(getComputedStyle(component.element).getPropertyValue('--sx')).toBe('1')
-		expect(getComputedStyle(component.element).getPropertyValue('--sy')).toBe('1')
-
-		await component.setProps({ path, flip: 'both' })
-
-		expect(getComputedStyle(component.element).getPropertyValue('--sx')).toBe('-1')
-		expect(getComputedStyle(component.element).getPropertyValue('--sy')).toBe('-1')
-
-		await component.setProps({ path, flip: 'horizontal' })
-
-		expect(getComputedStyle(component.element).getPropertyValue('--sx')).toBe('-1')
-		expect(getComputedStyle(component.element).getPropertyValue('--sy')).toBe('1')
-
-		await component.setProps({ path, flip: 'vertical' })
-
-		expect(getComputedStyle(component.element).getPropertyValue('--sx')).toBe('1')
-		expect(getComputedStyle(component.element).getPropertyValue('--sy')).toBe('-1')
-	})
-
-	it("accepts a 'rotate' property", async () => {
-		await component.setProps({ path, rotate: 90 })
-
-		expect(getComputedStyle(component.element).getPropertyValue('--r')).toBe('90deg')
-	})
-})

No alert changes

Improved metrics

Number of lines in readme file

69

30.19%

Worsened metrics

Total package byte prevSize

176647

-0.2%

No dependency changes