{"id":13480193,"url":"https://github.com/AndersNielsen85/tailwindcss-bg-svg","last_synced_at":"2025-03-27T10:31:06.667Z","repository":{"id":57376390,"uuid":"175812843","full_name":"AndersNielsen85/tailwindcss-bg-svg","owner":"AndersNielsen85","description":null,"archived":false,"fork":false,"pushed_at":"2022-04-01T08:08:05.000Z","size":8,"stargazers_count":22,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T23:44:55.675Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndersNielsen85.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-15T12:04:57.000Z","updated_at":"2024-10-02T04:38:14.000Z","dependencies_parsed_at":"2022-09-06T06:51:23.661Z","dependency_job_id":null,"html_url":"https://github.com/AndersNielsen85/tailwindcss-bg-svg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndersNielsen85%2Ftailwindcss-bg-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndersNielsen85%2Ftailwindcss-bg-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndersNielsen85%2Ftailwindcss-bg-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndersNielsen85%2Ftailwindcss-bg-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndersNielsen85","download_url":"https://codeload.github.com/AndersNielsen85/tailwindcss-bg-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245826796,"owners_count":20678858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:35.555Z","updated_at":"2025-03-27T10:31:06.370Z","avatar_url":"https://github.com/AndersNielsen85.png","language":"JavaScript","funding_links":[],"categories":["Plugins","JavaScript"],"sub_categories":[],"readme":"# Background svg Tailwind Plugin\n\n## V2 breaking change\nThe configuration has been moved from plugin to utility.\nThis should allow for on-the-fly adding icons with HMR.\n\nIf you are coming from pre v2 you will need to move your configuration.\n\n[Looking for the the V1 documentation?](https://github.com/AndersNielsen85/tailwindcss-bg-svg/tree/v1)\n\n## Installation\n\nAdd this plugin to your project:\n\n```bash\n# Install via npm\nnpm install --save-dev tailwindcss-bg-svg\n\n# or yarn\nyarn add tailwindcss-bg-svg --dev\n```\n\n## Usage\n\nThe Background svg plugin exposes options for you to use. The plugin will use your existing tailwind colors.\nIt works by replacing \"svgcolor\" with the color code and base64 encoding the svg.\nRemember to set your fill/stroke to svgcolor\n\nExample code for using the plugin.\n\n```js\nlet colors = {\n  'black': '#22292f',\n  'grey': {\n    '100': '#3d4852',\n  },\n}\n\nmodule.exports = {\n  theme: {\n    bgSvg: {\n        'arrow': '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 15.04 12.37\"\u003e\u003cpath d=\"M.5,6.19H14.35\" fill=\"none\" stroke=\"svgcolor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/\u003e\u003cpolyline points=\"8.86 0.5 14.54 6.19 8.86 11.87\" fill=\"none\" stroke=\"svgcolor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/\u003e\u003c/svg\u003e',\n    }\n    // ...\n  },\n  plugins: [\n    require('tailwindcss-bg-svg'),\n    // ...\n  ],\n}\n```\n\nThis configuration would create the following classes:\n\n```css\n.bg-svg-arrow-black{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.99 25'%3E%3Cpath d='M24.65 21.61l-4.87-4.87a1.16 1.16 0 0 0-.78-.34h-.8a10.14 10.14 0 1 0-1.75 1.75V19a1.16 1.16 0 0 0 .34.83l4.87 4.87a1.17 1.17 0 0 0 1.65 0l1.38-1.38a1.16 1.16 0 0 0-.04-1.71zm-14.5-5.22a6.25 6.25 0 1 1 6.25-6.25 6.24 6.24 0 0 1-6.25 6.25z' fill='%2322292f'/%3E%3C/svg%3E\")}\n.bg-svg-arrow-grey-100{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.99 25'%3E%3Cpath d='M24.65 21.61l-4.87-4.87a1.16 1.16 0 0 0-.78-.34h-.8a10.14 10.14 0 1 0-1.75 1.75V19a1.16 1.16 0 0 0 .34.83l4.87 4.87a1.17 1.17 0 0 0 1.65 0l1.38-1.38a1.16 1.16 0 0 0-.04-1.71zm-14.5-5.22a6.25 6.25 0 1 1 6.25-6.25 6.24 6.24 0 0 1-6.25 6.25z' fill='%233d4852'/%3E%3C/svg%3E\")}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAndersNielsen85%2Ftailwindcss-bg-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAndersNielsen85%2Ftailwindcss-bg-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAndersNielsen85%2Ftailwindcss-bg-svg/lists"}