https://www.tuziki.com/coder/article/6714ef24e9d42916eda727e3? 使用Unocss可以高效处理tailwindcss和icon图标。首先,通过pnpm安装相关依赖,包括Unocss和iconify的工具。然后,在项目根目录创建uno.config.ts配置文件,导入并定义Unocss的配置。配置包括启用默认预设、
我又新建了一个vite + svelte + unocss + iconify的项目来测试,结果图标就可以正常显示 然后我就研究了一下它这个图标的加载方式,其实就是使用到了-webkit-mask来创建掩码图像 -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' width='1em' height='1em...
它提供了iconify图标框架中大量的图表集。 iconfy官方网站 开始引入这个功能,首先在Unocss插件中添加presetIcons预设。 文件名:config/unocss.ts exportdefault() =>Unocss({ safelist,presets: [presetUno(),presetAttributify(),presetIcons(),// 添加图标预设] }); 定制图标安全列表 为了能够在UnoCSS中使用变...
unplugin-vue-components 组件方式使用 pnpm add -D unplugin-vue-components 这个库可以让我们使用组件的方式使用图标 @iconify/vue 组件方式使用 pnpm add @iconify/vue 这个也是以组件的方式使用图标,和上面的区别是组件名称固定,通过传入icon属性来区分图标,有利于我们进行组件封装 ...
它提供了iconify图标框架中大量的图表集。 iconfy官方网站 开始引入这个功能,首先在Unocss插件中添加presetIcons预设。 文件名:config/unocss.ts export default () => Unocss({ safelist, presets: [ presetUno(), presetAttributify(), presetIcons(), // 添加图标预设...
想使用图标 你可进入这个链接 https://icones.js.org/ 你需要下载这个图标库,下载方式就是 包名字后面的logos就是你需要的图标库名,图标库名可以从对应的地址栏查看 pnpm i -D @iconify-json/logos 图标库具体使用 找到你喜欢的图标库 例如 选中你需要的图标,然后选中Unocss查看对应的class类名 ...
可以使用纯css图标,首先还需要下载icon npm install -D @iconify/json 也可以只下载 某一个你要使用的图标 npm install -D @iconify-json/[the-collection-you-want] //或者 yarn add @iconify/json 也可以只下载 某一个你要使用的图标 yarn add @iconify-json/[the-collection-you-want] ...
想使用图标 你需要下载这个图标库,下载方式就是 包名字后面的logos就是你需要的图标库名,图标库名可以从对应的地址栏查看 pnpmi-D@iconify-json/logos AI代码助手复制代码 图标库具体使用 找到你喜欢的图标库 例如 选中你需要的图标,然后选中Unocss查看对应的class类名 ...
pnpm i -D @iconify-json/logos 1. 图标库具体使用 找到你喜欢的图标库 例如 选中你需要的图标,然后选中Unocss查看对应的class类名 当然你也可以使用下面多种方式使用 代码中使用 1. 1 效果 Unocss 也可以增加一些预设css配置 在vite.config.ts增加...
Iconify 图标:使用喜欢的库中的任何图标。 CSS 预设:UnoCSS 预设包可供使用,轻松渲染 UI。 主题配置:使用unocss等属性模式进行设计,支持主题配置,自定义主题。 该组件库内置了很多常见的组件,比如按钮、图片、复选框、输入框、标签、通知等等=。支持单独引入某个组件: ...