爱文者原创网,优化网站用什么软件好,wordpress翻转框,西宁做网站的工作室hfex-icon图标库
Install
npm i -D hfex-icon主要提供2种使用方式
方式一
通过svg图标资源#xff0c;借助unplugin-icons库将svg图标文件生成vue组件#xff0c;然后通过vue组件的引入方式在vue中使用
unplugin-icons
兼容vue2和vue3
在vue.config.js的plugins中配置…hfex-icon图标库
Install
npm i -D hfex-icon主要提供2种使用方式
方式一
通过svg图标资源借助unplugin-icons库将svg图标文件生成vue组件然后通过vue组件的引入方式在vue中使用
unplugin-icons
兼容vue2和vue3
在vue.config.js的plugins中配置
Install unplugin-icons
npm i -D unplugin-iconsWebpack版本
const path require(path)
const Icons require(unplugin-icons/webpack);
const { FileSystemIconLoader } require(unplugin-icons/loaders);
module.exports {configureWebpack:{plugins:[Icons({compiler: vue2,//vue2或者vue3看当前项目customCollections: {hfex-icon: FileSystemIconLoader(path.join(process.cwd(), ./node_modules/hfex-icon/icons), svg svg.replace(/^svg /, svg fillcurrentColor ))}})]}
}Vite版本
import { defineConfig } from vite
import Icons from unplugin-icons/vite
import path from path
import { FileSystemIconLoader } from unplugin-icons/loaders
export default defineConfig({plugins:[Icons({compiler: vue3,//vue2或者vue3看当前项目customCollections: {hfex-icon: FileSystemIconLoader(path.join(process.cwd(), ./node_modules/hfex-icon/icons), svg {return svg.replace(/^svg /, svg fillcurrentColor )})}
}),
]
})也可以通过hfex-icon-plugin 配置hfex-icon-plugin是将以上plugin上的配置封装起来
Install
npm i hfex-icon-plugin -D在vue.config.js的plugins中配置(webpack)
vite版本待更新…
const HfexIconPlugin require(hfex-icon-plugin)
module.exports {configureWebpack:{plugins:[...HfexIconPlugin.plugins]}
}在vue入口文件引入注册组件
import HfexIcon from hfex-icon
app.use(HfexIcon) //vue3
Vue.use(MfexIcon); //vue2
使用
hfex-icon namehome color#999 size80px/效果展示 参数支持
参数类型默认值namestringhomesizestring28pxcolorstring#000
方式二
配合unocss使用
Install unocss
npm install -D unocss在vue入口文件引入
import uno.css在vue.config.js的plugins中配置
npm install -D unocss/webpack//vue.config.js
const UnoCSS require(unocss/webpack).default
const presetIcons require(unocss).presetIcons
const presetUno require(unocss).presetUno
const presetAttributify require(unocss).presetAttributifymodule.exports {configureWebpack:{plugins:[UnoCSS({presets: [presetUno(),presetAttributify(),presetIcons({collections: {hfex-icon: () require(hfex-icon/iconify-json/hfex-icon.json)}})]}),]}
}
vite中使用
//vite.config.ts
import Unocss from unocss/vite
import { defineConfig } from vite
import Unocss from unocss/vite
import { presetUno, presetAttributify, presetIcons } from unocssexport default defineConfig({plugins:[UnoCSS({presets: [presetUno(),presetAttributify(),presetIcons({collections: {hfex-icon: () require(hfex-icon/iconify-json/hfex-icon.json)}})]}),]
})
使用
div classi-hfex-icon:message w-80px h-80px bg-#cde6c7/div
div classi-hfex-icon:delete w-80px h-80px bg-#994405/div
div classi-hfex-icon:share w-80px h-80px bg-#cde6c7/div效果展示 图标支持
