Svelte Barcode
svelte-barcode
A light-weight and high-performance component to generate barcode for Svelte.
🔧 Install
svelte-barcode is available on npm. It can be installed with the following command:
npm install svelte-barcode --save
svelte-barcode is available on yarn as well. It can be installed with the following command:
yarn add svelte-barcode --save
Note: Install as a dev dependency ( npm install svelte-barcode -D ) ( yarn add svelte-barcode --dev ) if using Sapper to avoid a SSR error.
💡 Usage
<script>
import Barcode from 'svelte-barcode';
</script>
<Barcode
value={'svelte-barcode'}
elementTag={'canvas'}
options={{
format: 'CODE128',
width: 2,
height: 100,
text: '',
textAlign: 'center',
textPosition: 'bottom',
textMargin: 2,
fontSize: 20,
background: '#ffffff',
lineColor: '#000000',
}}
/>
props
| Props | Type | Default | Require | Description |
|---|---|---|---|---|
| value | string | ✔️ | Text to generate. | |
| elementTag | 'img' | 'canvas' | 'svg' | 'img' | ❌ | |
| options | any | ❌ | Options to generate. |
options
| Options | Type | Default | Require | Description |
|---|---|---|---|---|
| format | string? | auto |
❌ | Select which barcode type to use. Please check the wikipage of the different barcode types for more information. |
| width | number? | 2 |
❌ | The width option is the width of a single bar. |
| height | number? | 100 |
❌ | The height of the barcode. |
| displayValue | boolean? | true |
❌ | |
| text | string? | undefined |
❌ | Overide the text that is diplayed |
| fontOptions | string? | '' |
❌ | With fontOptions you can add bold or italic text to the barcode. |
| font | string? | 'monospace' |
❌ | Define the font used for the text in the generated barcode. This can be any default font or a font defined by a @font-face rule. |
| textAlign | string? | 'center' |
❌ | Set the horizontal alignment of the text. Can be left / center / right. |
| textPosition | string? | 'bottom' |
❌ | Set the vertical position of the text. Can be bottom / top. |
| textMargin | number? | 2 |
❌ | Set the vertical position of the text. Can be bottom / top. |
| fontSize | number? | 20 |
❌ | Set the size of the text. |
| background | string? | '#ffffff' |
❌ | Set the background of the barcode. |
| lineColor | string? | '#000000' |
❌ | Set the color of the bars and the text. |
| margin | number? | 10 |
❌ | Set the space margin around the barcode. If nothing else is set, all side will inherit the margins property but can be replaced if you want to set them separably. |
| marginTop | number? | undefined |
❌ | |
| marginBottom | number? | undefined |
❌ | |
| marginLeft | number? | undefined |
❌ | |
| marginRight | number? | undefined |
❌ | |
| flat | boolean? | false |
❌ | Only for EAN8 / EAN13 |
❗ Issues
If you think any of the svelte-barcode can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.
🌟 Contribution
We'd love to have your helping hand on contributions to svelte-barcode by forking and sending a pull request!
Your contributions are heartily ♡ welcome, recognized and appreciated. (✿◠‿◠)
How to contribute:
- Open pull request with improvements
- Discuss ideas in issues
- Spread the word
- Reach out with any feedback
⚖️ License
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.