https://github.com/xdnloveme/svg2iconfont-webpack
a webpack plugin for svg to iconfont.🎉
https://github.com/xdnloveme/svg2iconfont-webpack
iconfont svg svg2iconfont-webpack webfonts webpack webpack-plugin
Last synced: 5 months ago
JSON representation
a webpack plugin for svg to iconfont.🎉
- Host: GitHub
- URL: https://github.com/xdnloveme/svg2iconfont-webpack
- Owner: xdnloveme
- License: mit
- Created: 2020-03-05T02:53:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:39:16.000Z (almost 3 years ago)
- Last Synced: 2025-04-19T08:15:43.211Z (6 months ago)
- Topics: iconfont, svg, svg2iconfont-webpack, webfonts, webpack, webpack-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/svg2iconfont-webpack
- Size: 1.37 MB
- Stars: 8
- Watchers: 2
- Forks: 4
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svg2Iconfont-webpack
A webpack plugin for **svg transform to iconfont** automatically.🎉
# why use?
English:
1. You can **package all svg files** to **iconfont** bundle.
2. You can use it in your code by **setting ClassName(the same as filename)** directly **without any import or require**.
3. All process is automatic, you don't care about anything;
中文:
1. 你可以根据**指定资源路径**，打包所有的svg文件，统一生成一份iconfont文件
2. 整个流程都是**自动的**，统一生成的文件也是**自动引入的**，你不用另外的import或者require，你只需要启动你的项目(npm start)，即可在你的代码里**对应文件名直接设置ClassName**，即可显示ICON图标。
# Getting Started
First of all, install the module:
```
npm i svg2iconfont-webpack
```
> ⚠️ Warning: The webpack-plugin `Svg2Iconfont-webpack` require webpack v4, not support webpack v3.
## Usage
```javascript
const Svg2IconfontWebpack = require("svg2iconfont-webpack");
const path = require('path');
const resolve = oppositePath => {
return path.resolve(__dirname, oppositePath);
};
module.exports = {
plugins: [
new Svg2IconfontWebpack({
// 你的资源文件夹根目录
// your svg assets root url
assetsPath: resolve("./assets/icon"),
// output（输出配置）
output: {
// 输出字体文件的名称(ttf, otf, etc...)
// font-lib name => myIconfont
fileName: "myIconfont",
// 引入CSS文件的名称
// import css modules name
cssFileName: "iconfont-web"
},
// font options（字体配置）
fontOptions: {
// icon类名的前缀
cssPrefix: 'iconfont',
// 图标的基准大小
// icon basic size
fontSize: 32,
// 图标的font-family
// font-family
fontFamily: 'iconfont'
},
// 是否开启图标列表预览模式
// 预览模式默认监听在本地3000端口，若端口占用依次递增
preview: false
})
]
}
```
And you can show the icons by setting **ClassName(From Filename)**, the same name from Filename, including the path,**but format to '-' sign**.
```html
```
Then you will see **ICON appeared**:
OR You can set its unicode by your own className(**First, you should know the ICON's unicode**)
```html
```
Css
```css
/* your icon class */
.my-icon-class::after {
/* your icon unicode */
content: "\0e602";
}
```
# LICENSE
### [MIT](https://github.com/xdnloveme/Svg2Iconfont-webpack/blob/master/LICENSE)