Comments (4)
@david-plugge This is awesome thanks for sharing.
Aliases could be a problem, but not in the way you described. We currently have alias imports for certain icons, sometimes we rename icons when needed, we solve this by exporting the "old" name. But I think we can fix this.
from lucide.
I have not checked out if other packages than lucide-svelte
expose the icons via the .../icons/*
path but if so it would work for any lucide package when used with vite
from lucide.
@david-plugge thank you so much, this has solved my problem over at tabler icons:
function tablerSvelteImportOptimizer(): import('vite').Plugin {
return {
name: 'tabler-svelte optimizer',
transform(code, id) {
const ms = new MagicString(code, { filename: id });
ms.replace(
/([ \t]*)import\s+\{([^;]*?)\}\s+from\s+['"]@tabler\/icons-svelte['"];/g,
(match, whitespace: string, importNames: string) => {
const hasSemi = match.endsWith(';');
const imports = importNames
.split(',')
.map((v) => v.trim())
.map((name) => {
const path = name;
return `${whitespace}import ${name} from '@tabler/icons-svelte/${path}.svelte'${hasSemi ? ';' : ''}`;
});
return imports.join('\n');
}
);
if (ms.hasChanged()) {
return {
code: ms.toString(),
map: ms.generateMap()
};
}
}
};
}
from lucide.
cool plugin, I had to modify it a bit to get it to work with icons with numbers in them, as well as new lines within the import.
Whilst i was there I also bodged in support for lucide aliases by checking against the .d.ts for each icon, I'm sure this pretty inefficient but its still faster than transforming all the icons
function lucideSvelteImportOptimizer(): Plugin {
const aliases = readFileSync('node_modules/lucide-svelte/dist/aliases.d.ts', 'utf8');
return {
name: 'lucide-svelte optimizer',
transform(code, id) {
const ms = new MagicString(code, { filename: id });
ms.replace(
/([ \t]*)import\s+\{([^}]+)\}\s+from\s+["']lucide-svelte["'];/g,
(match, whitespace: string, importNames: string) => {
const hasSemi = match.endsWith(';');
const imports = importNames
.split(',')
.map((v) => v.trim())
.map((name) => {
let path;
const alias = aliases.match(
new RegExp(`as ${name} } from '\\.\\/icons\\/(.+)\\.svelte';`),
);
if (alias) {
path = alias[1]!;
} else {
path = name
.split('')
.map((c, i) => {
const code = c.charCodeAt(0);
return (code >= 65 && code <= 90) || (code >= 48 && code <= 57)
? (i === 0 ? '' : '-') + c.toLowerCase()
: c;
})
.join('');
}
return `${whitespace}import ${name} from 'lucide-svelte/icons/${path}'${hasSemi ? ';' : ''}`;
});
return imports.join('\n');
},
);
if (ms.hasChanged()) {
return {
code: ms.toString(),
map: ms.generateMap(),
};
}
},
};
}
from lucide.
Related Issues (20)
- Module '"lucide-react"' has no exported member 'Notebook'.ts(2305) HOT 3
- Breaking changes between `lucide-static@307` and `lucide-static@308+` (package moved to ESM)
- Git icon HOT 8
- Map Pin Plus
- Creating new icons triggers 'unique "key" prop' error HOT 3
- Drone icon HOT 2
- List Check Icon HOT 2
- Figma plugin keeps loading and won't run HOT 6
- X-(Twiiter) New Logo HOT 1
- Icon Request: Cloud Checked Icon HOT 3
- Time Picker
- Find renamed icons HOT 1
- `Angular 18` peer dependency
- [Icon Request] Onion HOT 9
- Pill Container HOT 2
- Icon request: circle-incomplete
- Sort by date icons
- `pencil-off` icon
- Radar chart HOT 3
- Moto HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lucide.