filetype-mask-icons 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 O. Patrick Barnes
+
+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.

package/README.md

@@ -0,0 +1,290 @@
+# filetype-mask-icons
+
+A tiny set of file-type icons implemented as **CSS mask images**.
+
+These icons inherit color from `currentColor`, which allows them to automatically adapt to **light mode, dark mode, and custom themes** without needing separate icon assets.
+
+The icons are intentionally minimal and intended to represent common file types in interfaces such as file browsers, dashboards, and developer tools.
+
+
+---
+
+# Quick Example
+
+```html
+<div class="filetype-mask-icon"
+     style="--icon:var(--filetype-mask-icon-file); width:24px; height:24px;">
+</div>
+```
+
+```css
+.filetype-mask-icon{
+  display:inline-block;
+  background:currentColor;
+  mask:var(--icon) center / contain no-repeat;
+  -webkit-mask:var(--icon) center / contain no-repeat;
+  mask-mode:luminance;
+}
+```
+
+The icon color is inherited from `currentColor`, which means it automatically adapts to your theme.
+
+---
+
+# Demo
+
+A live demo of the icons is available here:
+
+<https://opbarnes.github.io/filetype-mask-icons/demo/>
+
+The demo shows:
+
+- All available icons
+- Multiple icon sizes
+- Light and dark theme behavior
+
+This allows you to see exactly how the icons render and how they inherit color from `currentColor`.
+
+---
+
+# Why this exists
+
+Traditional icon approaches often require:
+
+- Separate icons for **light and dark themes**
+- Inline SVG manipulation
+- Multiple color variants
+
+These icons use **CSS masking**, which allows the icon color to come directly from CSS.
+
+Because of this:
+
+- Icons automatically match surrounding text color
+- They work with **light and dark themes**
+- They can be styled with **hover effects, transitions, or theme variables**
+- No separate dark/light icon sets are required
+
+Example theme:
+
+```css
+.light {
+  color: black;
+}
+
+.dark {
+  color: white;
+}
+```
+
+The icon automatically adapts to the theme.
+
+---
+
+# Icon Set
+
+Currently included icons:
+
+- file
+- folder
+- image
+- zip
+- code
+- video
+- audio
+- document
+
+---
+
+# Demo
+
+A visual demo of all icons and sizes is available here:
+
+```
+demo/index.html
+```
+
+Open this file in a browser to preview the icons and test light/dark mode behavior.
+
+---
+
+# Installation
+
+## Using npm
+
+If you are using a JavaScript build tool (such as Vite, Webpack, Parcel, etc.), install the package with npm:
+
+```bash
+npm install filetype-mask-icons
+```
+
+Then import the stylesheet into your project.
+
+### Import from JavaScript
+
+Add the import to your main JavaScript entry file (for example `src/main.js`, `src/index.js`, or `src/main.ts`):
+
+```javascript
+import "filetype-mask-icons/css/icons.css"
+```
+
+### Import from CSS
+
+If your project has a main stylesheet (for example `src/style.css`, `src/main.css`, or similar), you can import it there instead:
+
+```css
+@import "filetype-mask-icons/css/icons.css";
+```
+
+---
+
+## Using Vite
+
+Vite supports CSS imports directly.
+
+Add the import to your main entry file (usually `src/main.js` or `src/main.ts`):
+
+```javascript
+import "filetype-mask-icons/css/icons.css"
+```
+
+Example `src/main.js`:
+
+```javascript
+import "filetype-mask-icons/css/icons.css"
+import "./style.css"
+```
+
+No additional configuration is required.
+
+---
+
+## Using SCSS / Sass
+
+If your project uses SCSS or Sass, import the stylesheet inside your SCSS file.
+
+Example:
+
+```scss
+@import "filetype-mask-icons/css/icons.css";
+```
+
+Or using modern Sass syntax:
+
+```scss
+@use "filetype-mask-icons/css/icons.css";
+```
+
+---
+
+## Without npm
+
+You can copy the stylesheet directly into your project:
+
+```
+css/icons.css
+```
+
+Then include it in your HTML:
+
+```html
+<link rel="stylesheet" href="css/icons.css">
+```
+
+---
+
+# Usage
+
+Apply the `.filetype-mask-icon` class and set the `--icon` variable to one of the provided icon variables.
+
+Example:
+
+```html
+<div class="filetype-mask-icon"
+     style="--icon:var(--filetype-mask-icon-file); width:24px; height:24px;">
+</div>
+```
+
+The icon color comes from `currentColor`.
+
+Example:
+
+```css
+.file {
+  color: #444;
+}
+
+.dark .file {
+  color: #eee;
+}
+```
+
+The icon will automatically inherit the color.
+
+---
+
+# Available icon variables
+
+```css
+--filetype-mask-icon-file
+--filetype-mask-icon-folder
+--filetype-mask-icon-image
+--filetype-mask-icon-zip
+--filetype-mask-icon-code
+--filetype-mask-icon-video
+--filetype-mask-icon-audio
+--filetype-mask-icon-doc
+```
+
+---
+
+# Example
+
+```html
+<div class="filetype-mask-icon"
+     style="--icon:var(--filetype-mask-icon-folder); width:32px; height:32px;">
+</div>
+```
+
+---
+
+# Customizing size
+
+The icon size is controlled using normal CSS `width` and `height`.
+
+You can set the size inline:
+
+```html
+<div class="filetype-mask-icon"
+     style="--icon:var(--filetype-mask-icon-file); width:24px; height:24px;">
+</div>
+```
+
+Or define your own CSS classes:
+
+```css
+.icon-small{
+  width:16px;
+  height:16px;
+}
+
+.icon-large{
+  width:48px;
+  height:48px;
+}
+```
+
+Then apply them to the element:
+
+```html
+<div class="filetype-mask-icon icon-large"
+     style="--icon:var(--filetype-mask-icon-folder);">
+</div>
+```
+
+---
+
+# License
+
+MIT License
+
+See the `LICENSE` file for details.

package/css/icons.css

@@ -0,0 +1,18 @@
+:root{
+--filetype-mask-icon-file:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h9l5 5v15H6z'/></svg>");
+--filetype-mask-icon-folder:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M3 6h6l2 2h10v10H3z'/></svg>");
+--filetype-mask-icon-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='16' height='16' rx='1.5' ry='1.5' fill='white'/><path fill='black' d='M7 13l2-2 4 4 3-3 3 4H5z'/></svg>");
+--filetype-mask-icon-zip:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2L15 2L20 7L20 22L6 22Z'/><rect x='12.3' y='4.7' width='1' height='10.1' rx='0.2' fill='black'/><rect x='12.7' y='5.9' width='3' height='1.2' rx='0.15' fill='black'/><rect x='10' y='7.9' width='3' height='1.2' rx='0.15' fill='black'/><rect x='12.7' y='10' width='3' height='1.2' rx='0.15' fill='black'/><rect x='10' y='11.9' width='3' height='1.2' rx='0.15' fill='black'/><rect x='11.2' y='14.5' width='3.3' height='1.2' rx='0.15' fill='black'/><path fill='black' d='M10.56 19.52L11.77 15.6H13.83L15.04 19.52Z'/></svg>");
+--filetype-mask-icon-code:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h9l5 5v15H6z'/><g fill='none' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'><polyline points='14.5 14.5 17.5 12 14.5 9.5'/><polyline points='11.5 9.5 8.5 12 11.5 14.5'/></g></svg>");
+--filetype-mask-icon-video:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='16' height='16' rx='1.5' ry='1.5' fill='white'/><rect x='7' y='7' width='7.6' height='10' rx='0.9' ry='0.9' fill='black'/><path fill='black' d='M14.3 10l3-1.5v7l-3-1.5z'/></svg>");
+--filetype-mask-icon-audio:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='4' y='4' width='16' height='16' rx='1.5' ry='1.5' fill='white'/><path fill='black' stroke='black' stroke-width='1' stroke-linejoin='round' d='M8.7 10v4h2.8l3.8 3.8V6.2L11.5 10Z'/></svg>");
+--filetype-mask-icon-doc:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M6 2h9l5 5v15H6z'/><g fill='none' stroke='black' stroke-width='1' stroke-linecap='round'><path d='M8.5 11h9'/><path d='M8.5 14h9'/><path d='M8.5 17h9'/></g></svg>");
+}
+
+.filetype-mask-icon{
+  display:inline-block;
+  background:currentColor;
+  mask:var(--icon) center / contain no-repeat;
+  -webkit-mask:var(--icon) center / contain no-repeat;
+  mask-mode:luminance;
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "filetype-mask-icons",
+  "version": "1.0.0",
+  "description": "A tiny set of file-type icons implemented as CSS mask images, designed to inherit color from currentColor for easy theming and dark-mode support.",
+  "keywords": [
+    "css",
+    "icons",
+    "mask",
+    "filetype",
+    "file-icons",
+    "filetype-icons",
+    "css-mask",
+    "svg-icons",
+    "minimal-icons"
+  ],
+  "author": "O. Patrick Barnes",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/opbarnes/filetype-mask-icons.git"
+  },
+  "homepage": "https://github.com/opbarnes/filetype-mask-icons",
+  "files": [
+    "css"
+  ],
+  "style": "css/filetype-mask-icons.css",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}