chore: 🔧 prepare for npm release

.github/workflows/CI.yml

@@ -16,7 +16,7 @@ jobs:
     - name: Install dependencies
       run: npm ci
     - name: Build font
-      run: npm run build
+      run: npm run build:example
     - name: Upload artifact
       uses: actions/upload-artifact@v4
       with:

.gitignore

@@ -1,2 +1,3 @@
 out/
+dist/
 node_modules/

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "printWidth": 120
+}

CONTRIBUTING.md

@@ -12,4 +12,4 @@ To add a new icon simply add the SVG in the `./svg/` subdirectory. The filename
 
 To build the font, `npm` and Node.js is required. Simply install all dependencies (run `npm ci`) and then run `npm run build` in the root directory of this repository.
 
-The output directory (`./out/`) includes an `example.html`-file, which can be used to check whether all icons are rendered correctly.
+You can also use `npm run build:example`. This will create an output directory (`./out/`) including an `example.html`-file, which can be used to check whether all icons are rendered correctly.

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Jonas "DerZade" Schade
+
+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.

README.md

@@ -1,25 +1,66 @@
-# Arma Events Icon font
-This repository contains the icon font for [arma.events](https://arma.events) using [font ligatures](https://fonts.google.com/knowledge/glossary/ligature).  
+# Icon font for arma.events
 
-This font is basically a subset of [Lucide Icons](https://github.com/lucide-icons/lucide) together with some icons that were created specifically for [arma.events](https://arma.events). All icons originating from Lucide have the same name as in Lucide, but `-` (minus) has been changed to `_` (underscore). 
+This package contains the icon font for [arma.events](https://arma.events) and related projects.
+
+The font uses [font ligatures](https://fonts.google.com/knowledge/glossary/ligature) and is basically a subset of [Lucide Icons](https://github.com/lucide-icons/lucide) together with some icons that were created specifically for [arma.events](https://arma.events). All icons originating from Lucide have the same name as in Lucide, but `-` (minus) has been changed to `_` (underscore).
 
 You can find a detailed breakdown of where each icon comes from in the [icon sources section](#icon-sources) at the bottom of this readme.
 
+## Installation
+
+```
+npm i @arma-events/icon-font
+```
 
 ## Usage
 
-To use the font, simply include the `arma-eventicons.css` from the output directory. You may have to adjust the paths to the font files. 
+Simply include the css file, which includes font-face and a class:
+
+```css
+@import '@arma-events/icon-font/dist/index.css';
+```
+
+Then use it in your HTML:
+
+```html
+<span class="arma-eventicons" aria-hidden="true">crown</span>
+```
+
+> [!TIP]
+> You can find a list of all icons by simply checking the [`svg`-directory](./svg/)
+
+## Advanced Usage
+
+This package also includes a SCSS file which allows some configuration and can be used instead of the CSS file:
+
+```scss
+// the values used here are the default values
+@use '@arma-events/icon-font/dist/index.scss' as icon-font with (
+  $base-path: '@arma-events/icon-font/dist',
+  // set $class to '' to disable a generation of the css class selector
+  $class: 'arma-eventicons',
+  $font-family: 'arma.events Icon Font'
+);
+
+// use the styles-mixin to include the relevant
+// styles for icons in your own selectors:
+#icon {
+  @include icon-font.styles;
+}
+```
 
 ## Icon Sources
 
-Most icons are from  [Lucide Icons](https://github.com/lucide-icons/lucide), but there are a few exceptions:
+Most icons are from [Lucide Icons](https://github.com/lucide-icons/lucide), but there are a few exceptions:
 
 The following icons are from [Simple Icons](https://github.com/simple-icons/simple-icons):
+
 - `discord`
 - `twitter`
 - `youtube`
 
 The following icons are custom made for arma.events:
+
 - `condensed`
 - `crown`
 - `crown_off`
@@ -30,6 +71,3 @@ The following icons are custom made for arma.events:
 - `text`
 - `plus_small`
 - `calendar_dashed`
-
-
-

index.scss

@@ -0,0 +1,40 @@
+$base-path: '@arma-events/icon-font/dist' !default;
+$class: 'arma-eventicons' !default;
+$font-family: 'arma.events Icon Font' !default;
+
+@font-face {
+  font-family: $font-family;
+  src: url('#{$base-path}/icon-font.woff2') format('woff2'), url('#{$base-path}/icon-font.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@mixin styles() {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: $font-family !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  -webkit-font-feature-settings: 'liga';
+  -moz-font-feature-settings: 'liga=1';
+  -moz-font-feature-settings: 'liga';
+  -ms-font-feature-settings: 'liga' 1;
+  font-feature-settings: 'liga';
+  -webkit-font-variant-ligatures: discretionary-ligatures;
+  font-variant-ligatures: discretionary-ligatures;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@if $class != '' {
+  .#{$class} {
+    @include styles();
+  }
+}