Simple one-dimensional barcode generator focused on scalability and
themability.
Created to be easy to use, lightweight, and compatible with Tailwind CSS.
- Creates responsive SVG graphics that adapt to parent container sizes.
- Is TailwindCSS friendly (you can easily apply foreground and background colors).
- Can be used in the browser (ES2017) and in runtimes such as Node, Deno, and Bun.
- Can be used in frameworks like React, Vue, Svelte, etc.
- Can be used in React Native and Expo. Should be compatible with NativeWind and Unistyles.
- Names of formats are compatible with Barcode Detection API formats.
- Is dependency-free.
- Is easy to use.
- It has not been battle-tested yet. Might have bugs.
- Whether the project will be developed further depends on my willingness to work.
Among the libraries available on NPM, none met my needs. Some lacked tree shaking, others required complex configurations just to generate decent looking SVG, and some applied colors that couldn’t be easily overridden with Tailwind. So, I decided to create my own library.
import SvgBarcodeGenerator from "svg-barcode-generator";
const barcode = SvgBarcodeGenerator.generate("7423522549551", "ean_13");
console.log(barcode);import SvgBarcodeGenerator from "svg-barcode-generator";
export const YourComponent = () => {
const barcode = SvgBarcodeGenerator.generate("7423522549551", "ean_13");
return (
<div className="p-6 bg-white fill-current text-black">
<div dangerouslySetInnerHTML={{ __html: barcode }} />
</div>
);
};- Check ean_13 (seems to be broken)
- Add support for upc_e (the last one of planned 1D formats)
- Add automatic testing
If you see potential in this project and want to help - feel free to contribute.
You can contact me on LinkedIn or Discord: avaray_
