Move package under /package folder + React/Svelte/Vue components

Author: nolimits4web

.gitignore

@@ -1,3 +1,11 @@
+.DS_Store
 .git
 npm-debug.log
 node_modules
+package/react/*.js
+package/react/esm/*.js
+package/react/cjs/*.js
+package/vue/*.js
+package/vue/vue/*.vue
+package/svelte/*.js
+package/svelte/svelte/*.svelte

.npmignore

@@ -0,0 +1,18 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 100,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

.vscode/settings.json

@@ -11,51 +11,51 @@ The font is developed to be used with [Framework7](http://framework7.io/), but y
 1. Download and extract the font pack
 2. Copy the `framework7-icons.css` to your project or add this CSS to your own CSS file:
 
-    ```css
-    @font-face {
-      font-family: 'Framework7 Icons';
-      font-style: normal;
-      font-weight: 400;
-      src: url("../fonts/Framework7Icons-Regular.eot");
-      src: local('Framework7 Icons'),
-         local('Framework7Icons-Regular'),
-         url("../fonts/Framework7Icons-Regular.woff2") format("woff2"),
-         url("../fonts/Framework7Icons-Regular.woff") format("woff"),
-         url("../fonts/Framework7Icons-Regular.ttf") format("truetype");
-    }
-
-    .f7-icons, .framework7-icons {
-      font-family: 'Framework7 Icons';
-      font-weight: normal;
-      font-style: normal;
-      font-size: 28px;
-      line-height: 1;
-      letter-spacing: normal;
-      text-transform: none;
-      display: inline-block;
-      white-space: nowrap;
-      word-wrap: normal;
-      direction: ltr;
-      -webkit-font-smoothing: antialiased;
-      text-rendering: optimizeLegibility;
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-font-feature-settings: "liga";
-      -moz-font-feature-settings: "liga=1";
-      -moz-font-feature-settings: "liga";
-      font-feature-settings: "liga";
-    }
-    ```
+   ```css
+   @font-face {
+     font-family: 'Framework7 Icons';
+     font-style: normal;
+     font-weight: 400;
+     src: url('../fonts/Framework7Icons-Regular.eot');
+     src: local('Framework7 Icons'), local('Framework7Icons-Regular'),
+       url('../fonts/Framework7Icons-Regular.woff2') format('woff2'), url('../fonts/Framework7Icons-Regular.woff')
+         format('woff'), url('../fonts/Framework7Icons-Regular.ttf') format('truetype');
+   }
+
+   .f7-icons,
+   .framework7-icons {
+     font-family: 'Framework7 Icons';
+     font-weight: normal;
+     font-style: normal;
+     font-size: 28px;
+     line-height: 1;
+     letter-spacing: normal;
+     text-transform: none;
+     display: inline-block;
+     white-space: nowrap;
+     word-wrap: normal;
+     direction: ltr;
+     -webkit-font-smoothing: antialiased;
+     text-rendering: optimizeLegibility;
+     -moz-osx-font-smoothing: grayscale;
+     -webkit-font-feature-settings: 'liga';
+     -moz-font-feature-settings: 'liga=1';
+     -moz-font-feature-settings: 'liga';
+     font-feature-settings: 'liga';
+   }
+   ```
+
 3. Copy the `fonts` folder to your project
 4. Ensure the font urls within `framework7-icons.css` properly reference the `fonts` path within your project.
 5. Include a reference to the `framework7-icons.css` file from every webpage you need to use it:
 
-    ```html
-    <link rel="stylesheet" href="path/to/framework7-icons.css">
-    ```
+   ```html
+   <link rel="stylesheet" href="path/to/framework7-icons.css" />
+   ```
 
 Or with [component](https://github.com/componentjs/component):
 
-    $ component install nolimits4web/framework7-icons
+    $ component install framework7io/framework7-icons
 
 Or with [bower](http://bower.io/):
 
@@ -80,10 +80,10 @@ Then you can import the module like so:
 import 'framework7-icons';
 ```
 
-
 ## HTML Example
 
 You can use [framework7.io](http://framework7.io) or included `cheatsheet.html` file to easily find the icon you want to use. It’s easy to incorporate icons into your web page. Here’s a small example:
+
 ```html
 <i class="f7-icons">house</i>
 ```
@@ -97,10 +97,18 @@ This example uses a typographic feature called [ligatures](http://alistapart.com
 Framework7 Icons look best at 28px, but if an icon needs to be displayed in an alternative size, just use CSS `font-size` rule:
 
 ```css
-.size-14 { font-size: 14px }
-.size-28 { font-size: 28px }
-.size-32 { font-size: 32px }
-.size-56 { font-size: 56px }
+.size-14 {
+  font-size: 14px;
+}
+.size-28 {
+  font-size: 28px;
+}
+.size-32 {
+  font-size: 32px;
+}
+.size-56 {
+  font-size: 56px;
+}
 ```
 
 ```html
@@ -115,13 +123,16 @@ Framework7 Icons look best at 28px, but if an icon needs to be displayed in an a
 Using the icon font allows for easy styling of an icon in any color.
 
 ```css
-.color-black { color: #000 }
-.color-white { color: #fff }
+.color-black {
+  color: #000;
+}
+.color-white {
+  color: #fff;
+}
 ```
 
 ```html
-<i class="f7-icons color-black">house</i>
-<i class="f7-icons color-white">house</i>
+<i class="f7-icons color-black">house</i> <i class="f7-icons color-white">house</i>
 ```
 
 ## Using in `data-` attributes
@@ -130,8 +141,8 @@ Add the following CSS rule:
 
 ```css
 .f7-icons[data-icon]:before {
-    content: attr(data-icon);
-    color: inherit;
+  content: attr(data-icon);
+  color: inherit;
 }
 ```
 
@@ -141,26 +152,88 @@ And now you can use it with `data-` attributes:
 <i class="f7-icons" data-icon="house"></i>
 ```
 
+## SVG Components
+
+Since v 4.0.0 there are pure SVG components available for React, Svelte and Vue.
+
+In React:
+
+```jsx
+import { House, HeartCircle } from 'framewokr7-icons/react';
+
+export default () {
+  // ...
+  return (
+    <div>
+      <House />
+      ...
+      <HeartCircle>
+    </div>
+  )
+}
+```
+
+In Svelte:
+
+```html
+<div>
+  ...
+  <House />
+  ...
+  <HeartCircle>
+  ...
+</div>
+<script>
+  import { House, HeartCircle } from 'framewokr7-icons/svelte';
+  // ...
+</script>
+```
+
+In Vue:
+
+```html
+<template>
+  <div>
+    ...
+    <f7-house />
+    ...
+    <f7-heart-circle />
+    ...
+  </div>
+</template>
+```
+
+<script>
+  import { House, HeartCircle } from 'framewokr7-icons/svelte';
+
+  export default {
+    components: {
+      f7House: House,
+      f7HeartCircle: HeartCircle,
+    },
+    ...
+  }
+</script>
 
 ## Build Instructions
 
 This repo already comes with all the files built and ready to go, but can also build the fonts from the source. Requires Python, FontForge and woff2:
 
-1) Install FontForge, which is the program that creates the font files from the SVG files:
+1. Install FontForge, which is the program that creates the font files from the SVG files:
 
-    $ brew install fontforge ttfautohint
+   $ brew install fontforge ttfautohint
 
-2) Install woff2
+2. Install woff2
 
-    $ git clone --recursive https://github.com/google/woff2.git
-    $ cd woff2
-    $ make clean all
+   $ git clone --recursive https://github.com/google/woff2.git
+   $ cd woff2
+   $ make clean all
 
-3) Add or subtract files from the `src/` folder you'd like to be apart of the font files.
+3. Add or subtract files from the `src/` folder you'd like to be apart of the font files.
 
-4) Run the build command:
+4. Run the build command:
 
-    python ./build/generate.py
+   python ./build/generate.py
 
 ## License
 

README.md

@@ -0,0 +1,6 @@
+let modules = process.env.MODULES || false;
+if (modules === 'esm' || modules === 'false') modules = false;
+
+module.exports = {
+  presets: ['@babel/preset-react', ['@babel/preset-env', { modules, loose: true }]],
+};

bower.json

@@ -0,0 +1,8 @@
+const { promise: exec } = require('exec-sh');
+
+const buildFont = async () => {
+  exec(
+    `python ./build/generate.py && ttf2woff ./package/fonts/Framework7Icons-Regular.ttf ./package/fonts/Framework7Icons-Regular.woff`,
+  );
+};
+module.exports = buildFont;