Closed itpropro closed 2 years ago
I have this working with Vue 2 and unplugin-icons fine. Here's my vite.config pertinent sections
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
export default defineConfig({
plugins: [
Icons({
compiler: 'vue2',
customCollections: {
// https://github.com/antfu/unplugin-icons#custom-icons
custom: FileSystemIconLoader('./public/icons', svg => {
return svg.replace(/^<svg /, '<svg fill="currentColor" ');
}),
},
iconCustomizer(collection, icon, props) {
// customize all icons in a collection
if (['icon', 'symbol'].includes(collection)) {
props.fill = 'currentColor';
}
},
}),
Components({
dts: false, // enabled by default if `typescript` is installed
// relative paths to the directory to search for components.
dirs: ['src/common/components', 'src/public', 'src/plugins'],
// valid file extensions for components.
extensions: ['vue'],
// search for subdirectories
deep: true,
// resolvers for custom components
resolvers: [
IconsResolver({
prefix: false,
alias: {
icon: 'custom',
},
customCollections: ['symbol', 'custom'],
}),
],
}),
})
@Codermar is my reproduction repository working for you? I have not used Vue 2 for over a year and I don't plan to go back ;) @antfu do you maybe have a second to take a look and my reproduction repo to verify if I misconfigured something or if it's actually a bug?
This problem still exists, can you maybe help @userquin?
Actually I also met same issue under vue3. While using auto import, import will take effect but IconsResolver looks failes. When I use the test autoInstall feature, it will always try to install my local path and failed with errors. Looks IconsResolver does not load the local path correctly without any error msg output.
Did anyone have time to take a look at my reproduction repo? If there is anything missing, I will happily provide that information :)
@itpropro I'll take a look (unfortunately I haven't had time to update to pnpm 7 yet and I have to do it, so I'll try to check what's wrong)
@itpropro so, the components.d.ts
in your repo should have Footer
and the router components once we import the icons on the src/pages/index.vue
like this (I'm checking why the UnoCSS
icon is not shown)?
EDIT: the UnoCSS
icon not shown since you don't have the preset-icons
installed/configured.
also the UnoCSS
icon working:
so the problem now is to auto import these 2 icons...
@itpropro working (you've an example on examples/vite-vue3/App.vue
)
You are not using the convention to use the auto import, the icon tag should be <i-collection-icon />
, by default the icon resolver has i
as prefix.
In your repo (my local zip copy), I update to latest versions the following deps: vite 2.9.8
, unplugin-icons 0.14.3
and @vitejs/plugin-vue 2.3.2
(some other but not required, if you have some problem just request me the full dev dependencies
updated).
You also need to add this to the tsconfig.json
: "include": ["*.d.ts"]
, check this https://github.com/antfu/unplugin-vue-components#typescript => Make sure you also add components.d.ts
to your tsconfig.json
under includes
.
For UnoCSS
icons, replace UnoCSS
plugin with (and use x-
prefix or change it to another: BEWARE not using default prefix i-
, may collide with this plugin):
Unocss({
presets: [presetIcons({ prefix: 'x-' })],
}),
EDIT: also working importing 1 of the icons on src/pages/index.vue
.
also working importing 1 of the icons on src/pages/index.vue
, you can check the syntax changes:
Thanks for you detailed exploration @userquin that helped a lot! Lot's of stuff, I didn't find in the documentation, as soon as I integrated this, I will create a little docs PR ๐ The packages were indeed quite old and some basic configuration missing as the repo was created in a few minutes in march ๐
I can't get custom icon auto component import to work with unplugin-icons. I have a folder with svgs and I use the
FileSystemIconLoader
helper to load the icons. As soon, as I explicitly import the icons withit works, but eventhough I added the following to the Components configuration, it doesn't load the components
Here is a reproduction repo based on vitesse-lite and two fontawesome free icons as example: https://github.com/itpropro/unplugin-icons-repro