Comments (2)
Known issue according to README:
country-flag-icons
is missing the South Korean flag as the SVG usesclip-path
which our parser at this time cannot handle.
My workaround is to manually handle it with Quasar custom Image Icons, make an icon point to an image URL by using the img:
prefix.
See: https://quasar.dev/vue-components/icon#image-icons
const flagKR = require('path/to/public/kr.svg') // Download from: https://flagicons.lipis.dev/flags/4x3/kr.svg
// OR
const flagKRBase64 = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBpZD0iZmxhZy1pY29ucy1rciIgdmlld0JveD0iMCAwIDY0MCA0ODAiPgogIDxkZWZzPgogICAgPGNsaXBQYXRoIGlkPSJrci1hIj4KICAgICAgPHBhdGggZmlsbC1vcGFjaXR5PSIuNyIgZD0iTS05NS44LS40aDY4Mi43djUxMkgtOTUuOHoiLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgogIDxnIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1wYXRoPSJ1cmwoI2tyLWEpIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4OS44IC40KXNjYWxlKC45Mzc1KSI+CiAgICA8cGF0aCBmaWxsPSIjZmZmIiBkPSJNLTk1LjgtLjRINTg3djUxMkgtOTUuOFoiLz4KICAgIDxnIHRyYW5zZm9ybT0icm90YXRlKC01Ni4zIDM2MS42IC0xMDEuMylzY2FsZSgxMC42NjY2NykiPgogICAgICA8ZyBpZD0ia3ItYyI+CiAgICAgICAgPHBhdGggaWQ9ImtyLWIiIGZpbGw9IiMwMDAwMDEiIGQ9Ik0tNi0yNkg2djJILTZabTAgM0g2djJILTZabTAgM0g2djJILTZaIi8+CiAgICAgICAgPHVzZSB4bGluazpocmVmPSIja3ItYiIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgeT0iNDQiLz4KICAgICAgPC9nPgogICAgICA8cGF0aCBzdHJva2U9IiNmZmYiIGQ9Ik0wIDE3djEwIi8+CiAgICAgIDxwYXRoIGZpbGw9IiNjZDJlM2EiIGQ9Ik0wLTEyYTEyIDEyIDAgMCAxIDAgMjRaIi8+CiAgICAgIDxwYXRoIGZpbGw9IiMwMDQ3YTAiIGQ9Ik0wLTEyYTEyIDEyIDAgMCAwIDAgMjRBNiA2IDAgMCAwIDAgMFoiLz4KICAgICAgPGNpcmNsZSBjeT0iLTYiIHI9IjYiIGZpbGw9IiNjZDJlM2EiLz4KICAgIDwvZz4KICAgIDxnIHRyYW5zZm9ybT0icm90YXRlKC0xMjMuNyAxOTEuMiA2Mi4yKXNjYWxlKDEwLjY2NjY3KSI+CiAgICAgIDx1c2UgeGxpbms6aHJlZj0iI2tyLWMiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz4KICAgICAgPHBhdGggc3Ryb2tlPSIjZmZmIiBkPSJNMC0yMy41djNNMCAxN3YzLjVtMCAzdjMiLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo='
const icon = 'img:' + flagKR
<q-icon :name="icon" />
const icon64 = 'img:' + flagKRBase64
<q-icon :name="icon64"/>
from quasar-extras-svg-icons.
Thank you, I indeed failed to properly read the README.
Thanks also for the workaround, really useful.
from quasar-extras-svg-icons.
Related Issues (20)
- [Bug]: Carbon pictograms not showing correctly HOT 5
- [Bug]: Some icon sets don't display properly with Firefox HOT 1
- [bug] icomoon-fee-icons don't use currentColor (fixed at black) HOT 1
- [bug] Some icon sets are missing `translate` directive HOT 2
- [bug] akarSnapchatFill icon in akars icon set HOT 1
- [feat] set ant design two-tone to have opacity of currentColor HOT 1
- [breaking] Box icons doesn't need 'box' prefix HOT 1
- [breaking] Consolidate hero icons HOT 1
- [bug] some health-icons have white background HOT 4
- [bug] Health icon (negative) "nervous" has all same colors HOT 1
- [bug] several Open Iconic icons have issues being displayed HOT 3
- [bug] Evil icons - eiScLinkedin (dark mode) - not using currentColor HOT 1
- [bug] UIW Icons don't adhere to currentColor HOT 1
- Several Foundation icons are not using currentColor HOT 1
- [build] Modern icons => battery-30.svg has no paths
- Question: What is the best way to import a set of icons eg a set of country flags? HOT 4
- Possible to add to quasar.config.js and globally replace icons? HOT 2
- typos in README.md HOT 1
- Update phosphor icons to 2.0.0 HOT 2
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 quasar-extras-svg-icons.