Film Frame SVG element, flat

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/c8OhXhqonKf9/amnt.svg" alt="Film Frame" width="48" height="48">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="1024" height="1024"><g id="cream" data-name="Cream"><path d="M233 192c-8 2-14 8-17 16-5 16-1 99-1 122 0 51 0 102 0 154 0 102 0 205 0 308 0 10-2 25 7 34 10 11 89 6 108 6 51 0 102 0 154 0 75 0 150 0 226 0 19 0 65 3 81 0 6-1 13-7 15-12 7-13 3-105 3-125 0-52 0-103 0-154 0-103 0-206 0-308 0-10 2-22-4-31-2-4-8-9-13-10-16-3-77 0-97 0-52 0-103 0-154 0-75 0-150 0-224 0-22 0-65-4-84 0z" fill="#fcf0d2" stroke="#fcf0d2"/></g><g id="black" data-name="Black"><path d="M84 150c-10 2-19 8-23 17-9 17-4 133-4 161 0 68 0 136 0 204s0 136 0 204c0 23-4 99 2 116 3 8 10 14 17 17 14 6 33 3 49 3 136 0 271 0 408 0 96 0 192 0 289 0 27 0 55 0 83 0 11 0 24 2 35 0s21-10 25-20c6-17 2-130 2-157 0-68 0-136 0-204s0-137 0-204c0-24 4-100-2-117-3-8-10-14-17-17-14-6-33-3-48-3-137 0-272 0-408 0-96 0-192 0-287 0-28 0-56 0-83 0-13 0-26-2-38 0zm25 37c13-2 52-4 56 13 2 8 2 39-1 47-2 5-7 8-12 9-8 2-38 2-46-1-6-1-9-6-10-12-2-8-2-39 1-47 2-5 7-8 12-9zm763 0c13-3 52-4 56 13 2 8 2 41-2 49-2 4-6 6-11 7-8 2-38 2-46-1-6-1-9-6-10-12-2-8-2-40 2-48 2-4 7-7 11-8zm-639 5c19-4 62 0 84 0 74 0 149 0 224 0 51 0 102 0 154 0 20 0 81-3 97 0 5 1 11 6 13 10 6 9 4 21 4 31 0 102 0 205 0 308 0 51 0 102 0 154 0 20 4 112-3 125-2 5-9 11-15 12-16 3-62 0-81 0-76 0-151 0-226 0-52 0-103 0-154 0-19 0-98 5-108-6-9-9-7-24-7-34 0-103 0-206 0-308 0-52 0-103 0-154 0-23-4-106 1-122 3-8 9-14 17-16zM107 304c8-2 40-2 48 1 5 1 8 5 9 9 4 12 5 53-10 57-8 3-40 3-48 0-4-1-8-5-9-9-4-12-5-54 10-58zm763 0c8-2 40-2 48 1 4 1 8 5 9 9 3 8 3 40 0 48-1 5-5 8-10 9-8 3-42 3-49 0-4-2-7-5-8-10-4-11-5-53 10-57zM109 419c13-3 52-4 56 13 3 13 4 52-13 56-13 3-52 4-56-13-2-8-2-40 1-47 2-5 7-8 12-9zm763 0c13-3 52-4 56 13 2 8 2 40-1 47-2 5-7 8-12 9-12 3-52 4-56-13-3-13-4-52 13-56zM108 535c8-2 41-2 48 1 4 2 8 6 9 11 2 8 2 40-1 48-2 5-6 8-11 9-8 2-39 2-47-1-5-1-9-6-10-11-2-8-2-40 1-48 2-5 6-8 11-9zm763 0c8-2 41-2 48 1 5 2 8 6 9 11 3 12 4 53-12 57-8 2-39 2-47-1-5-1-8-6-9-11-3-13-5-53 11-57zM111 651c15-2 51-5 54 15 1 6 0 13 0 20 0 13 3 31-15 34-6 1-14 0-20 0-14 0-31 3-34-15-1-9-2-38 2-46 2-5 8-7 13-8zm767 0c19-1 48-6 50 19 2 19 7 48-18 50-20 1-49 7-51-18-1-20-7-48 19-51zM109 767c13-3 52-4 56 13 3 13 4 52-13 56-13 3-52 4-56-13-3-13-4-52 13-56zm764 0c14-2 52-5 55 14 2 8 2 41-2 48-3 4-7 6-12 7-8 2-38 2-46-1-5-2-8-7-9-13-2-8-2-43 3-49 3-3 7-5 11-6z" fill="#020101" stroke="#020101"/></g></svg>

.film-frame {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/c8OhXhqonKf9/amnt.svg");
  background-size: contain;
}

.film-frame {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/c8OhXhqonKf9/amnt.svg") center / contain no-repeat;
}

import FilmFrameSvg from "./film-frame.jsx"; // from the React tab above

<FilmFrameSvg width={48} height={48} />