https://github.com/swiftaff/svelte-iconify-svg
A node script to autogenerate svgs from iconify references in your svelte project
https://github.com/swiftaff/svelte-iconify-svg
Last synced: about 1 year ago
JSON representation
A node script to autogenerate svgs from iconify references in your svelte project
- Host: GitHub
- URL: https://github.com/swiftaff/svelte-iconify-svg
- Owner: Swiftaff
- Created: 2020-02-18T12:19:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-05T15:09:36.000Z (about 3 years ago)
- Last Synced: 2024-08-08T15:44:21.871Z (almost 2 years ago)
- Language: JavaScript
- Size: 855 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte Iconify SVG (Markup Exporter)
[](https://github.com/Swiftaff/svelte-iconify-svg) [](http://opensource.org/licenses/MIT)
[](https://circleci.com/gh/Swiftaff/svelte-iconify-svg)
## Purpose
Converts [iconify](https://iconify.design) icon names to SVG markup.
Intended for use in svelte projects to avoid dependencies on full font libraries, especially if you only need a few icons.
Automatically searches your source files so you can simply call this script before your build step to auto-generate the iconify icons you are referencing.
## How it works
Checks the contents of all your files in the supplied 'input' directories for any references to 'iconify' icons.
i.e. any text in the format 'alphanumericordashes colon alphanumericordashes' such as `fa:random` or `si-glyph:pin-location-2`
It will then save a .js file which exports an `icons` object of all iconify files found in your project.
## Installation
```
npm install svelte-iconify-svg --save-dev
```
## Usage (of this script)
Add to your package.json, and run it as part of your dev or build step
```
"scripts": {
"svelteiconifysvg": "svelte-iconify-svg -i 'input/directory1' 'input/directory2' -o 'output/filePath.js'"
}
```
### Flags
- -i or --input [default = "src"]
Directories to search. Provide them as a space separated list of strings. _FULL PATHS ONLY AT THE MOMENT_
- -o --output [default = "src/icons.js"]
FilePath to save
- -f --outputsvgfiles [default = false]
Outputs as individual svg files. Default is a single JS object of all icons SVG code
- -c --cjs [default = false]
outputs the JS object as commonJs "module.exports = ", instead of the default ES6 export syntax "export const icons = "
- -s --alwaysSave [default = false]
forces the iconify API network call and re-save of the icons file, instead of the default which will skip these if the icons list has not changed
- -r --recursive [default = false]
recursively searches within each input directory, instead of the default which will only search within the first level of input directories
- -l --logging [default = true]
controls the amount of console.logs. Leave it on for to help with debugging, or reduce if it's getting too noisy for your workflow, options are "all"|true, "some", "none"|false
- -t --transform [default = false]
fix for when some of your font awesome icons are reversed. Default is false. Set to true to enabled vertical or horizontal flipping for a small subset of fa icons such as fa:chevron-right and fa:arrow-circle-down.
## Or use the script indirectly, via the rollup plugin
https://github.com/Swiftaff/rollup-plugin-iconify-svg
## Usage (in svelte)
It's a bit hacky, but the simplest way is to use the svelte @html feature
```
//example.svelte
import icons from "./src/icons.js";
{@html icons["fa:random"]}
```
## Usage (in plain JavaScript)
```
const svelteiconifysvg = require("svelte-iconify-svg");
const src = "src";
const dest = "src/icons.js";
const options = {
commonJs: true, //default false
alwaysSave: true, //default false
recursive: true, //default false
logging: true, //default true or "all". Other options are:
//"some"
//false or "none"
transform: true //default false
regex: //default is this /(?<=("|'))(?!(bind|on|svelte))[a-zA-Z0-9-]+:[a-zA-Z0-9-]+(?=("|'))/g
getCodeFromIconList: //default null, allows you to replace the main iconify function
//e.g. provide your own which does something different than the inbuilt use of the iconfiy API - go nuts!
//as long as it returns an object {
// code: string to use when saving the file
// count: count of icons saved
//}
//e.g. in the format of fn(iconsList, options)=>{ code, count }
};
const icons = svelteiconifysvg(src, dest, options);
console.log(icons);
/*
Do with the resulting object what you will...
icons = {
"fa:random": "...svg markup for this icon",
... other icons
}
*/
```
## License
This project is licensed under the MIT License.